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

【问题标题】：Making future list items sortable using jQuery使用 jQuery 使未来的列表项可排序
【发布时间】：2014-03-20 22:42:54
【问题描述】：

我有一个输入框供用户输入一个项目，然后单击提交按钮或输入键，它被添加到一个 id 为 sortable 的无序列表中。我想让这个用户生成的无序列表可以使用 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) 中打开文件时，它仍然不可排序，但添加的列表项确实具有正确的输出。

【问题讨论】：

您遇到问题的 jQuery 代码在哪里？

标签： javascript jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

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

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

请注意，我在添加新项目后调用了“刷新”方法，而不是重新初始化整个列表。欲了解更多信息read here。

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

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

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

【讨论】：

这适用于 jsfiddle，但当我尝试在浏览器 (chrome) 中打开我的实际项目文件时，我仍然遇到同样的问题。它仍然不允许我对列表项进行排序。我很困惑为什么在 jsfiddle 中查看它和在浏览器中查看它会有区别。不过感谢您的贡献！
打开项目文件时是否在控制台中看到任何错误？
控制台中没有错误。最初我确实收到一条错误消息，指出在头部的每个 google 托管链接中都找不到文件，但是在将 https: 添加到它们的开头之后，它不再给我错误。不幸的是，列表仍然无法排序。
页面上是否有两个 id="sortable" 的元素？如果您尝试在#sortable ul 中形成一些列表，然后调用 $("#sortable").sortable();这样我们可以检查 ui 可排序插件在初始页面加载或添加一些元素后是否不起作用。
我在#sortable ul 中形成了一个列表并调用了$("#sortable").sortable();在我的 script.js 文件中，甚至无法对其进行排序。任何想法为什么它在初始页面加载时不起作用？ id="sortable" 的元素肯定只有一个。再次感谢您抽出宝贵时间回复。

【解决方案2】：

如果你这样做会更好

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 here

【讨论】：

我怀疑 CSS 会导致 JQuery 代码出现问题。检查您在 JSFiddle 上加载的 JQuery 版本。