Question

我的jQuery代码存在问题。当我做一个追加时，事件点击只需要处理第一个img，而不是新的（已添加）。

我的代码page.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");

    });

非常感谢你！

Answer 1

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

因此，您可以使用.on（）方法，它始终将click事件与该类的元素绑定。

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

Answer 2

由于图像是动态添加的，因此您需要使用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

Answer 3

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

改为使用.on（）函数：

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

请参阅http://api.jquery.com/on/

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

3 个答案: