0

我的 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");

    });

非常感谢你 ！

4

3 回答 3

2

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

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

$(document).on("click", '.delegate-add', function() { ... });
于 2013-06-28T08:52:00.833 回答
2

由于图片是动态添加的，所以需要使用事件委托来注册事件处理程序

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

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

小提琴演示

于 2013-06-28T08:53:27.783 回答
0

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

请改用 .on() 函数：

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

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

于 2013-06-28T09:05:16.603 回答