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

Question

我有以下代码：

$(document).ready(function({
    $(".click").click(function(){
        alert(' The Button Was Clicked !');
    });
}));

这很好。
但是如果我在网页上添加一个具有相同类的元素，如下所示：

$('#clicked').click(function(){
    $("#area").append("<button class='click'>Click me</button>");
});

然后我在.click类之前添加的事件处理程序将不适用于这个新元素。
将事件处理程序添加到动态添加的元素的最佳方法是什么？

Answer 1

<强>更新

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

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

});

从jQuery 1.7+开始，应该使用新的.on()并且不推荐使用.live()。一般的经验法则是：

• 除非您的jQuery版本不支持.live()。
，否则请勿使用.delegate()
• 除非您的jQuery版本不支持.delegate()。
，否则请勿使用.on()

另请查看此benchmark以查看效果的差异，您将了解不应使用.live()的原因。

---

以下是我的原始答案：

使用委托或现场

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

或

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

});

Answer 2

参考你的代码，做到这一点的方法是。

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

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

Answer 3

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

http://api.jquery.com/live/

Answer 4

在jQuery 1.7之后，live方法只指向.on（）方法。而且我很难找到如何将事件处理程序绑定到在加载后附加到DOM的元素。

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

这对我有用。对于那些遇到麻烦的人来说，只是一个小小的提示。