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

我有一个输入框，用户可以输入一个项目，然后单击submit按钮或enter键，它被添加到一个无序列表中，id为sortable。我想使用jQuery对这个用户生成的无序列表进行排序，但我无法让它工作。我相信这涉及到使用on方法，但我迄今为止的尝试完全没有成功

是指向包含项目的JSFIDLE的链接

此外，以下是我在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>

---

编辑：在JSFIDLE上，列表项是可排序的，但不能使用enter键提交，输出的是[object object]，而不是输入文本。在浏览器chrome中打开文件时，它仍然不可排序，但添加的列表项确实具有正确的输出。

如果您这样做会更好

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上，将子节点附加到选择中，并将包含的选择作为子节点附加到特定选择中

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

---

检查我的JSFIDLE

您只需要编写$'listWish'.val而不是$'listWish'

---

加载所有文档后，$function{}wrapper中的所有代码都将被调用。

您遇到问题的jQuery代码在哪里？我怀疑CSS会给jQuery代码带来问题。检查您在JSFIDLE上加载的JQuery版本。这在JSFIDLE上有效，但当我尝试在chrome浏览器中打开实际的项目文件时，仍然遇到同样的问题。它仍然不允许我对列表项进行排序。我不明白为什么在JSFIDLE中查看和在浏览器中查看会有区别。谢谢你的贡献！打开项目文件时，是否在控制台中看到任何错误？控制台中没有错误。起初，我确实收到一条错误消息，说在头部的每个谷歌托管链接中都找不到文件，但在添加https后：在它们的开头，它不再给我错误。很遗憾，列表仍然无法排序。页面上是否有两个id=sortable的元素？如果您试图在sortable ul中形成一些列表，然后调用$sortable.sortable；通过这种方式，我们可以检查ui sortable插件在初始页面加载或添加一些元素后是否工作；在我的script.js文件中，甚至无法对其进行排序。你知道为什么它在初始页面加载时不起作用吗？肯定只有一个id=sortable的元素。再次感谢您抽出时间回复。

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

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