jQuery.on()是否适用于在创build事件处理程序之后添加的元素?
我一直在这个印象之下, .on()
像dynamic创build的元素(比如我使用$('.foo').on('click', function(){alert('click')});
然后一个元素与foo
类是由于一些AJAX创build,现在我期待点击该元素导致警报)。 在实践中,这些不是我得到的结果。 我可能会犯一个错误,但有人能帮我理解在.on()
之后实现这些结果的新方法吗?
提前致谢。
.on()
适用于dynamic创build的元素。 jQuery文档在描述它时做得相当不错。
使用dynamic元素的方式是使用这种forms:
$("static selector").on('click', "dynamic selector", fn);
静态select器必须parsing为某个既是dynamic对象的祖先也是静态的对象 – 在运行此代码行时将出现,并且不会被删除或重新创build。
dynamicselect器是一个匹配你的dynamic元素的select器。 在事件处理程序第一次安装时,它们不必存在,它们可以随时随地来去。
所以,如果"#container"
匹配一个静态的祖先, ".foo"
匹配你想要的点击处理程序的dynamic元素,你可以使用这个;
$("#container").on("click", ".foo", fn);
如果你真的想了解它,那么.on()
的委托事件处理是如何工作的。 当您在上面进行.on()
调用时,它将一个单击事件处理程序附加到#container
对象。 稍后当你点击一个.foo
对象时,在实际的.foo
对象上没有点击处理器,所以点击冒泡了祖先链。 当点击到达#container
对象时,有一个点击处理程序,jQuery看着这个处理程序,并且看到这个处理程序仅适用于原始点击的对象与select器".foo"
匹配的对象。 它testing事件目标以查看它是否匹配该select器,如果是,则调用事件处理程序。
(现在不推荐使用) .live()
方法通过将所有事件处理程序附加到文档对象来工作。 由于文档对象是文档中每个对象的祖先,所以它们以这种方式获得了委托事件处理。 所以,在上面的例子中,这两个是等价的:
$(document).on("click", ".foo", fn); $(".foo").live("click", fn);
但是,在文档上附加所有的委托事件处理程序有时会造成一个严重的性能瓶颈,所以jQuery认为这是一个不好的方法,最好是要求开发人员指定一个有希望接近实际目标对象的静态祖先文档对象。
我想你面临着类似的情况,我面临。 这对于绑定事件与稍后生成的元素来说是一个很好的解决scheme。
绑定jQuery事件通过其他事件生成的元素