对于动态创建的元素(例如我使用$(‘。foo’)。on(‘click’,function(){alert(‘点击’)});然后由于一些AJAX,创建了一个类foo的元素,现在我期待该元素的点击导致警报)。实际上,这些并不是我得到的结果。我可能会犯错误,但有可能有人帮助我了解.on()中的这些结果的新方法吗?
提前致谢。
解决方法
.on()如果正确使用动态创建的元素。
jQuery doc做的很好,描述它。
使用它的动态元素的方法是使用这种形式:
$("static selector").on('click',"dynamic selector",fn);
静态选择器必须解析为一个既是动态对象的祖先又是静态的对象,当您运行这一行代码时,它不会被删除或重新创建。
动态选择器是一个与动态元素匹配的选择器。它们在事件处理程序首次安装时不必存在,并且可以按需要频繁地出现。
所以,如果“#container”匹配一个静态祖先,而“.foo”匹配你想要点击处理程序的动态元素,你可以使用它;
$("#container").on("click",".foo",fn);
如果您真的想了解这一点,这就是.on()的委托事件处理是如何工作的。当您上面的.on()调用时,它将一个点击事件处理程序附加到#container对象。稍后当您单击.foo对象时,实际的.foo对象上没有任何点击处理程序,因此点击将起始于祖先链。当点击获取到#container对象时,有一个点击处理程序,jQuery查看该处理程序,并看到此处理程序仅适用于原始单击对象与选择器“.foo”匹配的对象。它测试事件目标,看它是否匹配该选择器,如果是,它调用它的事件处理程序。
(现在已弃用).live()方法通过将所有事件处理程序附加到文档对象来实现。由于文档对象是文档中每个对象的祖先,因此它们以这种方式获得了委托事件处理。所以,在上面的例子中,这两个是等价的:
$(document).on("click",fn); $(".foo").live("click",fn);
但是,将所有委派的事件处理程序附加到文档上有时会造成严重的性能瓶颈,因此jQuery决定这是一个不好的方法,最好是要求开发人员指定一个希望更贴近实际目标对象的静态祖先文档对象。