JQuery .click（）在新的可排序项中不起作用

Question

我有JQuery UI Sortable + Draggable列表，我对所有可排序项目使用JQuery .click（），但如果我将新项目从可拖动列表中删除到可排序列表，则此项目不会触发.click（）事件。< / p>

$(#sortable li).click(function(){
    alert('Sortable item clicked');
});

https://jsfiddle.net/1so55b0t/2/

为什么？

好的，我将.click（）替换为.on（＆＃39;点击＆＃39;）

我的元素与class .remove有关闭按钮，再次对新元素不起作用：

$('#sortable li').on('click','.remove',function(){
    $(this).parent().remove();
});

https://jsfiddle.net/1so55b0t/4/ 为什么呢？

Answer 1

试试这个：当您在DOM中移动li时，它不会应用于先前绑定的单击事件处理程序。更好地使用点击事件委派，这对于动态/新元素（如下面的

）非常有用

$('#sortable').on('click', 'li', function(){
    alert('Sortable item clicked');
});

编辑 - 使用以下代码为删除按钮添加点击处理程序 -

$('#sortable').on('click','li .remove',function(e) {
    e.stopPropagation();
    $(this).parent().remove();
});

<强> JSFiddle Demo

Answer 2

因为您还需要将click处理程序附加到新添加的元素。将代码更改为如下。查看演示 - https://jsfiddle.net/1so55b0t/3/。

$('#sortable').on('click', 'li', function() {
    alert('Sortable item Clicked!');
 });

Answer 3

您可以使用此代码

＆＃13;

＆＃13;

 $(document).on('click', '#sortable li', function () {
 
    	alert('Sortable item Clicked!');
     });

＆＃13;

＆＃13;

＆＃13;