javascript - jQuery 可排序问题 = 未捕获的类型错误 : undefined is not a function

Question

(重写问题，因为它更具体)

当我手动创建“li”项目时，我有一个可排序的列表，但效果很好。然后，我停止手动创建项目，因为它们应该来自服务器端。但是一旦我开始通过 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>

现在，当我运行 getTasks 函数时，li 项得到正确填充。但是可排序功能无法触发。浏览器返回错误:

未捕获的类型错误:undefined 不是函数

不知何故，无法从 getTasks 函数中访问可排序功能。

完整代码如下: http://pastebin.com/wbdNLC9f

谢谢

Answer 1

我只能建议您需要更新您的 jQuery UI 代码。类似的代码工作:

$('.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>

由于代码片段似乎在 Google Chrome 中被破坏(似乎是 Stack Overflow 问题，但在 Firefox 中有效)，这里是 Fiddle我曾经测试过这个。