[英]jQuery sortable issue = Uncaught TypeError: undefined is not a function
(rewriting the question now that it's more specific) (现在重写问题更具体)
I had a sortable list working perfectly while I had manual 'li' items created. 当我创建了手动'li'项目时,我有一个可排序的列表完美地工作。 Then, I stopped creating the items manually since they should come from the server side. 然后,我停止手动创建项目,因为它们应该来自服务器端。 But once I started populating the li items through jquery, the sorting function stopped working. 但是一旦我开始通过jquery填充li项目,分类功能就停止了。
<section>
<div class="taskcontainer">
<h1>alpha</h1>
<ul id="sortable1" class="connected sortable list">
<!-- <li class="list-group-item">This worked perfectly before</li> -->
</ul>
</div>
</section>
<script>
$('.sortable').sortable();
$(function() { //run when the DOM is ready
$(".list-group-item").click(function() { //use a class, since your ID gets mangled
$(this).addClass("completed"); //add the class to the clicked element
});
});
</script>
<script>
function getTasks()
{
var jsontasks = jQuery.parseJSON('<%=raw(@jsontasks)%>');
$.each(jsontasks, function(index, element) {
$("#sortable1").append("<li class='list-group-item'>" + element.name + "</li>");
});
$('.sortable').sortable();
}
</script>
Now, when I run the getTasks function, the li items get populated correctly. 现在,当我运行getTasks函数时,li项正确填充。 But the sortable function can't fire. 但是可排序的功能无法触发。 Browser returns an error: 浏览器返回错误:
Uncaught TypeError: undefined is not a function 未捕获的TypeError:undefined不是函数
Somehow the sortable feature is not accessible from within the getTasks function. 不知何故,无法从getTasks函数中访问可排序的功能。
Here is the full code: http://pastebin.com/wbdNLC9f 以下是完整代码: http : //pastebin.com/wbdNLC9f
Thanks 谢谢
I can only suggest that you need to update your jQuery UI code. 我只能建议你需要更新你的jQuery UI代码。 Similar code works: 类似代码有效:
$('.sortable').sortable(); function getTasks() { var jsontasks = { "name1": { name: "geoff"}, "name2": { name: "mark"}, "name3": { name: "lucy"}, "name4": { name: "richard"}, "name5": { name: "amelia"}, "name6": { name: "james"}, "name7": { name: "ronald"} } $.each(jsontasks, function (index, element) { $("#sortable1").append("<li class='list-group-item'>" + element.name + "</li>"); }); $('.sortable').sortable(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> <section> <div class="taskcontainer"> <h1>alpha</h1> <ul id="sortable1" class="connected sortable list"></ul> </div> <button onclick="getTasks();">Sortable</button> </section>
As the code snippet seems to be broken in Google Chrome (seems to be a Stack Overflow problem, works in Firefox though), here's the Fiddle I used to test this. 由于Google Chrome中的代码段似乎已被破坏(似乎是Stack Overflow问题,但在Firefox中有效),这里是我用来测试它的小提琴 。
将所有元素添加到列表后,尝试调用sortable。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.