jQuery.on()是否适用于在创建事件处理程序后添加的元素？

Question

我总是在这种情况下对动态创建的元素.on()起作用.live()(例如我使用$('.foo').on('click', function(){alert('click')});然后foo由于某些AJAX而创建了类的元素,现在我期望点击该元素以引发警报) .在实践中,这些不是我得到的结果.我可能犯了一个错误,但是有人可以帮我理解实现这些结果的新方法.on()吗？

提前致谢.

Answer 1

.on()如果正确使用,则使用动态创建的元素.在jQuery的文档不描述它的一个不错的工作.

将它用于动态元素的方法是使用以下形式:

$("static selector").on('click', "dynamic selector", fn);

静态选择器必须解析为某个对象,该对象既是动态对象的祖先又是静态的 - 当您运行此行代码时不会被删除或重新创建.

动态选择器是一个与动态元素匹配的选择器.它们不必在首次安装事件处理程序时存在,并且它们可以根据需要随时出现.

因此,如果"#container"匹配一个静态祖先并".foo"匹配您想要点击处理程序的动态元素,您将使用此;

$("#container").on("click", ".foo", fn);

如果您真的想了解它,那么委托事件处理的.on()工作原理.当您进行上述.on()调用时,它会将click事件处理程序附加到该#container对象.稍后当您单击某个.foo对象时,实际.foo对象上没有单击处理程序,因此单击会在祖先链上冒泡.当单击到达#container对象时,有一个单击处理程序,jQuery查看该处理程序,并看到此处理程序仅适用于原始单击对象与选择器匹配的对象".foo".它测试事件目标以查看它是否与该选择器匹配,如果匹配,则调用它的事件处理程序.

(现已弃用).live()方法通过将所有事件处理程序附加到文档对象来工作.由于文档对象是文档中每个对象的祖先,因此它们以这种方式获得了委托事件处理.因此,在上面的例子中,这两个是等价的:

$(document).on("click", ".foo", fn);
$(".foo").live("click", fn);

但是,在文档上附加所有委托的事件处理程序有时会造成严重的性能瓶颈,因此jQuery认为这是一种不好的方法,并且最好要求开发人员指定一个希望更接近实际目标对象的静态祖先.文档对象.