jQuery sortable issue = Uncaught TypeError：undefined不是函數

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項正確填充。 但是可排序的功能無法觸發。 瀏覽器返回錯誤：

未捕獲的TypeError：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中有效），這里是我用來測試它的小提琴 。

Answer 2

將所有元素添加到列表后，嘗試調用sortable。