可拖动的innerHTML列表项不起作用
Posted
技术标签:
【中文标题】可拖动的innerHTML列表项不起作用【英文标题】：innerHTML list items dragable not working 【发布时间】：2016-12-10 02:22:32 【问题描述】：这是我的代码。当我调用 init innerhtml 时列表项不可拖动我不知道我卡在哪里了。test1 和 test2 不可拖动可以拖动吗？
Live jsFiddle example
$(document).ready(function()
$('#accordion ul').append('<li>test1</li><li>test2</li>');
$( "#accordion li" ).draggable(
helper: "clone",
revert: "invalid"
);
);<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="grid_3 mainwindow formfields">
<h3>Available Fields</h3>
<div id="accordion">
<ul>
<li>First Name</li>
<li>Last Name</li>
<li>Company</li>
</ul>
</div>
</div>
</body>
</html>【问题讨论】：
jsfiddle.net/oowg1xpr 【参考方案1】：这应该可以看到sn-p
$(document).ready(function()
$('#accordion ul').append('<li>test1</li><li>test2</li>');
$("#accordion li").draggable(
helper: "clone",
revert: "invalid"
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<div class="grid_3 mainwindow formfields">
<h3>Available Fields</h3>
<div id="accordion">
<ul>
<li>First Name</li>
<li>Last Name</li>
<li>Company</li>
</ul>
</div>
</div>【讨论】：
【参考方案2】：在 jquery ui 之前包含 jquery，它将起作用。
$(document).ready(function()
$( "#accordion li" ).draggable(
helper: "clone",
revert: "invalid"
);
);<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="grid_3 mainwindow formfields">
<h3>Available Fields</h3>
<div id="accordion">
<ul>
<li>First Name</li>
<li>Last Name</li>
<li>Company</li>
</ul>
</div>
</div>【讨论】：
ok JC Dev 看看现在我使用 innerhtml 添加一些标签，例如 $(document).ready(function() $('#accordion ul').append('test1') $( "#accordion li" ).draggable( helper: "clone", revert: "invalid" ); );但是 test1 是不可拖动的，怎么可能 那么你的情况可能是这个问题的重复问题：***.com/questions/18789354/…【参考方案3】：您需要导入正确的 jquery 和 jquery-ui 文件。
有效。
Working Fiddle
$(document).ready(function()
$( "#accordion li" ).draggable(
helper: "clone",
revert: "invalid"
);
);
在此处获取您的文件 https://jquery.com/download/
【讨论】：
【参考方案4】：<!DOCTYPE html>
<html>
<head>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function()
$( "#accordion li" ).draggable();
);
</script>
</head>
<body>
<div class="grid_3 mainwindow formfields">
<h3>Available Fields</h3>
<div id="accordion">
<ul>
<li>First Name</li>
<li>Last Name</li>
<li>Company</li>
</ul>
</div>
</div>
</body>
</html>
【讨论】：
以上是关于可拖动的innerHTML列表项不起作用的主要内容，如果未能解决你的问题，请参考以下文章
将可拖动对象放入可排序对象后，jQuery Click 事件不起作用