Question

我有一个输入框供用户输入项目，然后单击提交按钮或输入密钥，它将被添加到ID为可排序的无序列表中。我想使用jQuery使这个用户生成的无序列表可以排序，但我不能让它工作。我认为它涉及使用on方法，但到目前为止我的尝试都是完全不成功的。

Here是包含项目的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上，列表项是可排序的，但输入键不能用于提交，并且输出[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");

}

On JQuery .append()将一个子节点附加到选择中，并.appendTo()将选择包含作为子节点包含在特定选择中。

您可以将函数传递给.sort（）以指定如何对元素进行排序。

检查我的JSFiddle here

Answer 2

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

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

请注意，我正在打电话“刷新＆＃39;添加新项目后的方法不是重新整合整个列表。有关详细信息read here。

更新：在加载标记之前调用$("#sortable").sortable();可能就是这种情况。试着这样做：

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

在加载所有文档后，将调用$(function(){ })包装内的所有代码。

使用jQuery使未来的列表项可排序

2 个答案: