如何在尚不存在的元素上注册事件？

Question

我想要在像这样的元素上注册一个事件：

$(document).ready(function() {
   $('.classname').change(function(){
       alert ('This line is never triggered');
   });
});

但问题是，.classname元素是通过ajax后加载到dom中的。那么，在这种情况下，我应该如何正确地注册事件呢？是否有可能只注册一次（我的意思是，不是每次出现新元素都要注册）？

- Dziamid

Answer 1

由于live()已被弃用，您必须使用on()：

$(document).ready(function() {
   $( document ).on('change', '.classname', function(){
       alert ('This line is never triggered');
   });
});

- Nicola Peluchetti

---

现场看起来真的很酷。jQuery的开发人员能够实现这一点非常有趣：“事件一直冒泡到达树的根节点，这就是.live()默认绑定其特殊处理程序的地方。”谢谢，我不知道这一点，我一直在每次ajax调用后进行绑定！ - mikey

live()现在已经被弃用，请使用on()。请参考此答案：https://dev59.com/z2sy5IYBdhLWcg3w-i7h#8191450 - w3bshark

Answer 2

除了使用live()，还可以使用delegate()，例如：

$('form').delegate('.classname', 'change', function(){
    alert("This will alert when the newly-added element registers a 'change' event.");
});

为了将元素委托给选择器（.classname'）分配，在这种情况下，$('form') 必须在分配时存在于 DOM 中。

---

编辑以指出以下部分（紧接下一个“编辑”直到“参考”之前的部分）是错误的： JS Fiddle demo。

在delegate()选择器所选的元素和事件被delegate()的目标元素之间的元素上调用stopPropagation()会有所预测（尽管我之前没有意识到这一点），防止委派发生。 编辑响应OP在评论中的问题：

嘿，刚刚注意到，如果任何父级事件处理程序调用stopPropagation，则live事件将停止！这是正确的吗？

根据jQueryAPI（条目在下面链接）：

...由.delegate()处理的事件将始终传播到它们被委派的元素...

我尚未尝试/验证过这一点，但似乎即使坐落在目标元素（$('.classname')）和被delegate()的元素（$('form')）之间的元素调用了stopPropagation()，它也不应对delegate()产生负面影响。

参考：

• delegate()。

- David Thomas

---

嘿，我刚注意到，如果任何父级事件处理程序调用stopPropagation，则live事件将停止！这是正确的吗？ - Dziamid

我已经看过文档了，不过看一下这个例子：http://jsfiddle.net/WAXfc/1/。委托方法也是同样适用的，但我认为它更安全使用。 - Dziamid

@Dziamid：你是完全正确的（尽管您链接的演示使用了live()而不是delegate()，因此我更新了演示）。 - David Thomas

Answer 3

使用live，它将事件绑定到当前和将来的所有元素：

$(document).ready(function() {
   $('.classname').live('change',function(){
       alert ('This line is never triggered');
   });
});

想要了解更多信息，请查看这里的文档。

- Niklas