javascript - 使用 jQuery 使 future 的列表项可排序

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

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

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

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

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

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

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