追加后点击事件不起作用，为什么？答案

【问题标题】：Click event don't work after append, why?追加后点击事件不起作用，为什么？
【发布时间】：2013-06-28 17:16:53
【问题描述】：

我的 jQuery 代码有问题。当我进行追加时，事件点击只对第一个 img 起作用，而不是新的（追加的）。

我的代码页.htm：

<img src="images/del.png" style="cursor:pointer;" title="Delete" class="delegate-del"/>
<img src="images/add.png" style="cursor:pointer;" title="Add" class="delegate-add" />

我的代码 jQuery：

// When we click on "add.png", the script add the image del.png
$('.delegate-add').click(function(){

        $('#tableautest').append('<img src="images/del.png" style="cursor:pointer;" title="Delete" class="delegate-del" />');

});




 /* The alert just work on the first balise <img src="images/del.png"... 
I don't understand why that's don't work with the new img appended...  An idea ??
*/
    $('.delegate-del').click(function(){
            alert("ok");

    });

非常感谢！

【问题讨论】：

标签： jquery append alert

【解决方案1】：

由于图片是动态添加的，所以需要使用event delegation注册事件处理函数

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#tableautest').on('click', '.delegate-del', function(event) {
    event.preventDefault();
    alert('testlink'); 
});

这会将您的活动附加到#tableautest 元素内的任何图像上，减少检查整个 document 元素树的范围并提高效率。

FIDDLE DEMO

【讨论】：

【解决方案2】：

这是因为此时您将 click 事件绑定到具有该类的所有现有元素。当您稍后添加具有相同类的元素时，该事件尚未绑定到该元素。

因此，您可以使用 .on() 方法，该方法将始终将点击事件绑定到该类的元素。

$(document).on("click", '.delegate-add', function() { ... });

【讨论】：

【解决方案3】：

.click() 会将事件附加到已经存在的元素上。当您使用 javascript 动态创建元素时，它不起作用。

改用 .on() 函数：

$('#tableautest').on('click', '.delegate-del', function(e) {
    e.preventDefault();
    alert('ok'); 
});

见http://api.jquery.com/on/

【讨论】：