jQuery：如何为动态添加的HTML元素添加事件处理程序？

Question

6

我有以下代码： $（document）.ready（function（{ $（".click"）。click（function（）{ alert（'按钮已点击！'）; }）; }}）;

这很好用。
但是，如果我向网页添加具有相同类的元素，如下所示： $（'#clicked'）。click（function（）{ $（"#area"）。append（"<button class ='click'>点击我</button>"）; }）;

那么我之前添加到.click类的事件处理程序将无法为此新元素工作。
动态添加元素的最佳方法是什么？

- Arihant Nahata

4个回答

5

关于你的代码，做法应该是这样的。

$('.click').live('click', function(){
  ... do cool stuff here
});

使用.live()函数可以动态地将事件处理程序附加到DOM对象。玩得开心！

- Hacknightly

2

自从jQuery 1.7版本后，live方法只是指向了.on()方法。我曾经遇到过很多困难，想要绑定事件处理程序到在DOM加载后被添加的元素上。

$('body').live('click', '.click', function(){
   //Your code
});

这对我很有帮助。对于那些也遇到麻烦的人，这是一个小技巧。

- Lulli

2

对于在运行时动态添加到DOM中的所有元素，请使用live。

- kobe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PeeHaa · Accepted Answer

更新

自从我发布这篇答案以来已经有一段时间了，现在情况有所改变：

$(document).on('click', '.click', function() {

});

自从 jQuery 1.7+ 版本以后，应该使用新的.on()而.live()已经被弃用。一般的准则是：

此外，查看这个基准测试可以看到性能差异，你会明白为什么不应该使用 .live()。

以下是我原始的回答：

使用 delegate 或 live。

$('.click').live('click', function(){
});

或者

$('body').delegate('.click', 'click', function() {

});