jQuery UI 可排序点击事件

Question

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

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

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

演示：http://jsfiddle.net/yosafatade/zX3pX/12/

Answer 1

你需要使用on()查看更新http://jsfiddle.net/zX3pX/13/

Answer 2

我会使用.on，因为.delegate 已被取代。这样您就可以将事件附加到列表而不是列表项。

使用这个：

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

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

小提琴：http://jsfiddle.net/qkCcS/

Answer 3

我可能会为它所在的表的每个li 项目添加一个类。例如

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

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

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