jQuery：如何将事件处理程序添加到动态添加的 HTML 元素？答案

【问题标题】：jQuery: How to add event handler to dynamically added HTML elements?jQuery：如何将事件处理程序添加到动态添加的 HTML 元素？
【发布时间】：2011-08-11 22:28:20
【问题描述】：

我有以下代码：

$(文档).ready(函数({ $(".click").click(function(){ alert('按钮被点击了！'); }); }));

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

$('#clicked').click(function(){ $("#area").append(""); });

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

更新

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

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

});

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

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

还可以查看此benchmark 以了解性能差异，您将了解为什么不应该使用.live()。

以下是我的原答案：

使用委托或实时

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

或

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

});

【讨论】：

啊！我只是迟到了一分钟:)
@Banx：甚至 2 分钟。哇，你好慢；）
我知道，我必须加强我的游戏:)

【解决方案2】：

参考您的代码，这样做的方法是。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

这对我有用。也只是给那些遇到问题的人一点提示。

【讨论】：