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

Question

我正在尝试在这样的元素上注册一个事件：

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

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

Answer 1

您必须使用on()，因为不推荐使用live（）：

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

Answer 2

除了建议您使用live()的答案之外，还可以使用delegate()，例如：

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

对于delegate要将选择器（.classname') >分配给的元素，在这种情况下，$('form')必须在分配时存在于DOM中。

---

已编辑，请注意以下部分（在“参考”之后的下一个“已编辑”之后）错误：

JS Fiddle demo

在stopPropagation()选择器选择的元素与事件为delegate()的目标之间的元素上调用delegate() - d 有点可预测（虽然我之前没有意识到这一点）阻止了授权的发生。

编辑以回复问题，在评论中，来自OP：

  

嘿，刚刚注意到，如果任何父级的事件处理程序调用stopPropagation，那么直播活动就会停止！这是对的吗？

不符合jQueryAPI（条目链接到下面）：

  

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

我还没有尝试/验证过这个问题，但似乎即使是位于目标元素（$('.classname')）和delegate() - d元素之间的元素（{ {1}}）调用$('form')它不应对stopPropagation()产生负面影响。

参考：

• delegate()。

Answer 3

使用live将事件绑定到现在和将来的所有元素：

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

有关更多信息，请查看documentation here。