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

时间:2012-03-21 23:24:43

标签: jquery

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

提前致谢。

2 个答案:

答案 0 :(得分:71)

.on()适用于动态创建的元素(如果使用得当)。 jQuery doc可以很好地描述它。

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

$("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认为这是一种不好的方法,并且最好要求开发人员指定一个希望更接近实际的静态祖先目标对象而不是文档对象。

答案 1 :(得分:1)

我认为你面临着我所面临的类似情况。对于使用稍后生成的元素绑定事件,这是一个非常好的解决方案。

Binding Jquery Events On Elements Generated Through Other Events