jQuery UI可排序单击事件

Question

我有两个可排序列表(#sortable1和#sortable2)，并编写了两个click()函数来处理每个可排序项目的点击事件($("#sortable1 li").click(function(){})和$("#sortable2 li").click(function(){}))。

我将一个项目从#sortable1(例如：Sort1 Item 2)列表移动到#sortable2列表。问题在于当项目移动到#sortable2并尝试单击它时，触发的鼠标事件是$("#sortable1 li").click(function(){})而不是$("#sortable2 li").click(function(){})。

是否有任何建议，以便如果我将项目从sortable1移动到sortable2并单击该项目，则该项目将触发$("#sortable2 li").click(function(){})？

DEMO: http://jsfiddle.net/yosafatade/zX3pX/12/

- yosafatade

Answer 1

我会使用 .on，因为 .delegate 已经过时了。这样，您可以将事件附加到列表而不是列表项。

使用以下代码：

$("#sortable1").on("click", "li", function(){
        $("#testClickSort1").html($(this).html());
});

$("#sortable2").on("click", "li", function(){
        $("#testClickSort2").html($(this).html());
});

fiddle: http://jsfiddle.net/qkCcS/

- Jon Wells

Answer 2

您需要使用on()来查看更新的内容，详见http://jsfiddle.net/zX3pX/13/

- David Michael Harrison

---

live()已被弃用 - 请使用.on()。 - oshikryu

如果您在可排序的项目中有可点击的项，还需在Sortable选项中添加helper:'clone'选项，以防止在拖动/排序时触发单击事件。https://dev59.com/InNA5IYBdhLWcg3wdtz5 - Roy Shoa

Answer 3

我可能会为每个

的项目添加一个类，来表示它所在的表格。例如：

<li class='sort1'></li>

然后当你在 $(".sort1") 上检查 .click 并移动项目时运行

$(this).removeClass("sort1");
$(this).addClass("sort2");

- Bryan Williams

---

我之前尝试过那种方法，但问题仍然存在。@DavidMichaelHarrison和CrimsonChin的答案才是适当的答案。 - yosafatade