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

UPDATE

我发布这个答案已经有一段时间了,事情现在已经改变了:

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

});

由于jQuery 1.7+ .on()应该使用new 并且.live()不推荐使用.一般的经验法则是:

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

另外,请查看此基准测试以查看性能差异,您将了解不应使用的原因.live().

以下是我的原始答案:

使用委托或现场

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

要么

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

});

Answer 2

在参考您的代码时,可以采用的方式.

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

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