javascript - 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()。一般的经验法则是:

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

另请查看此 benchmark看看性能上的差异，你就会明白为什么你不应该使用 .live()。

---

以下是我的原回答:

使用委托(delegate)或现场

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

或

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

});