使用jQuery使將來的列表項可排序

Question

我有一個供用戶輸入項目的輸入框，然后單擊提交按鈕或輸入鍵，它被添加到ID為可排序的無序列表中。 我想使用jQuery使此用戶生成的無序列表可排序，但是我無法使其正常工作。 我相信它涉及on方法的使用，但是到目前為止，我的嘗試完全沒有成功。

這是包含項目的jsfiddle的鏈接。

另外，這是我在html文件的開頭鏈接的內容：

<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>

編輯：在jsfiddle上，列表項是可排序的，但是enter鍵不能用於提交，並且[object Object]而不是輸入文本被輸出。 在瀏覽器（chrome）中打開文件時，它仍然無法排序，但是添加的列表項確實具有正確的輸出。

Answer 1

如果您做這樣的事情會更好

var changeText2 = function (){

    var listWish = $("#listWish").val();
    var node = $("#sortable").append("<li>")
    $("#sortable li:last-child").text(listWish);
    $("#sortable li").sort(naturalsort).appendTo("#sortable");

}

在JQuery上， .append（）將子節點附加到選擇中， .appendTo（）將選擇物包含作為特定子選擇的子節點。

您可以將函數傳遞給.sort（）來指定如何對元素進行排序。

在這里檢查我的JSFiddle

Answer 2

您只需要編寫$('#listWish').val()而不是$('#listWish') 。

$("#submitButton").on("click", function(){
   $("#sortable").append('<li>' + $('#listWish').val() + '</li>').sortable("refresh");
});

請注意，在添加新項之后，而不是重新初始化整個列表，我正在調用“ refresh”方法。 欲了解更多信息， 請點擊這里 。

更新：當您調用$("#sortable").sortable();時可能是這種情況$("#sortable").sortable(); 在標記加載之前。 嘗試以這種方式進行：

$(function(){
   $("#sortable").sortable();
})

裝入所有文檔后，將調用$(function(){ })包裝器中的所有代碼。