jQuery.on() 是否适用于创建事件处理程序后添加的元素? [英] Does jQuery.on() work for elements that are added after the event handler is created?

问题描述

一直以来，我的印象都是 .on() 在动态创建的元素方面就像 .live()(例如，我使用 $('.foo').on('click', function(){alert('click')}); 然后由于某些原因创建了一个类 foo 的元素AJAX，现在我期待点击该元素以引起警报).在实践中，这些并不是我得到的结果.我可能犯了一个错误，但有人可以帮助我理解在 .on() 之后实现这些结果的新方法吗?

I was under the impression all this time that .on() worked like .live() with regards to dynamically created elements (e.g. I use $('.foo').on('click', function(){alert('click')}); and then an element with the class foo is created due to some AJAX, now I'm expecting a click on that element to cause an alert). In practice, these weren't the results I got. I could be making a mistake, but could somebody help me understand the new way to achieve these results, in the wake of .on()?

提前致谢.

推荐答案

.on() 如果使用得当，可以处理动态创建的元素.jQuery doc 很好地描述了它.

.on() works with dynamically created elements if it is used properly. The jQuery doc does a pretty good job of describing it.

用于动态元素的方法是使用这种形式:

The way to use it for dynamic elements is to use this form:

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

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

The static selector must resolve to some object that is both an ancestor of your dynamic objects and is static - is present when you run this line of code and won't be removed or recreated.

动态选择器是与您的动态元素匹配的选择器.它们不必在首次安装事件处理程序时就存在，它们可以根据需要随时出现和消失.

The dynamic selector is a selector that matches your dynamic elements. They do not have to exist at the time the event handler is first installed and they can come and go as often as you want.

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

So, if "#container" matches a static ancestor and ".foo" matches your dynamic elements that you want click handlers on, you would use this;

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

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

If you really want to understand it, this is how the delegated event handling of .on() works. When you make the .on() call above, it attached a click event handler to the #container object. Sometime later when you click on a .foo object, there is no click handler on the actual .foo object so the click bubbles up the ancestor chain. When the click gets to the #container object, there is a click handler and jQuery looks at that handler and sees that this handler is only for objects where the original clicked-upon object matches the selector ".foo". It tests the event target to see if it does match that selector and if so, it calls the event handler for it.

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

The (now deprecated) .live() method worked by attaching all event handlers to the document object. Since the document object is an ancestor of every object in the document, they got delegated event handling that way. So, in the example above, these two are equivalent:

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

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

But, attaching all delegated event handlers on the document sometimes created a serious performance bottleneck so jQuery decided that was a bad way to do it and it was better to require the developer to specify a static ancestor that was hopefully closer to the actual target object than the document object.

这篇关于jQuery.on() 是否适用于创建事件处理程序后添加的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！