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')});，然后由于某些AJAX而创建了类foo的元素)，现在，我希望点击该元素会引起警报).实际上，这些不是我得到的结果.我可能会犯一个错误，但是在.on()之后，有人可以帮助我理解实现这些结果的 new 方法吗?

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文档很好地描述了它.

.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()调用时，它会将click事件处理程序附加到#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屋！