jQuery中的委托事件绑定 [英] Delegated event binding in jQuery

问题描述

有人可以解释为什么这行不通吗

Can someone please explain why this doesn't work

$(document).ready(function(){
   $(document).on('click', '.myClass', function(){
       // ...
   });
});

这也不起作用:

$(document).ready(function(){
   $('body').on('click', '.myClass', function(){
       // ...
   });
});

这仅适用于

$(document).ready(function(){
   $('.myClass').click(function(){
       // ...
   });
});

但是我每次都需要绑定以进行动态事件处理. 所以，请您能解释一下为什么前两个不起作用吗?

But I need to bind every time for dynamic event handling. So please, can you explain why the first two don't work?

(注意:这对$('.delegetor')都不起作用(即包装器div)，我尝试了body和document只是为了确保委托者是静态的)

(Note: it doesn't work with $('.delegetor') neither (i.e. a wrapper div) I tried body and document just to make sure the delegator is static)

编辑

根据我对第一个答案的理解:

From what I understood from the first answer:

<div id="parent">
  <div id="child">
    <div id="grandchild">The one</div>
  </div>
</div>

如果我愿意

$('#child').click(function(){return false;});
$('#parent').on('click', '#grandchild', function(){ alert("hi");});

click事件不会到达孙子，因为它在孩子中停止了吗? (我认为我没听错)

The click event won't reach grandchild because it stops in child ? (I don't think I understood this right)

推荐答案

事件委托的工作原理是将事件侦听器添加到您将事件绑定到的静态容器元素上.这取决于事件从目标元素冒泡到容器元素.当容器元素接收到事件时，jQuery会检查目标是否与选择器匹配，然后执行回调函数.

Event delegation works by adding the event listener to the static container element that you bind the event to. It depends on the event bubbling up from the target element to the container element. When the container element receives the event, jQuery checks whether the target matches the selector, and then executes the callback function.

如果在目标和容器之间有一个用于元素的处理程序，并且它调用event.stopPropagation()，则该事件将不再使事件冒泡.因此事件永远不会到达容器，并且委派失败.

If you have a handler for an element that's between the target and the container, and it calls event.stopPropagation(), that stops the event from bubbling any further. So the event never reaches the container, and the delegation fails.

请注意，如果jQuery事件处理程序返回false，则等效于调用:

Note that if a jQuery event handler returns false, it's equivalent to calling:

event.preventDefault();
event.stopPropagation();

如果只需要执行一项或多项操作，则应在处理程序中显式执行此操作，而不是返回false.

If you only need to do one or the other, you should do it explicitly in the handler, rather than returning false.

您需要将事件绑定到DOM层次结构中与目标元素尽可能近的静态元素，并确保您没有任何带有停止传播的单击处理程序的中间元素.

You need to bind the event to a static element as close in the DOM hierarchy as possible to the target element, and ensure that you don't have any intervening elements with click handlers that stop propagation.

$('.myClass').click(function() {
    ...
});

不受此影响，因为它直接将事件侦听器添加到.myClass元素，而不是容器.因此，它不依赖于冒泡到容器元素的事件.如果.myClass的孩子的点击处理程序停止传播，将会出现问题-当您单击该孩子时，.myClass不会获得该事件.事件委派也将因此而被阻止.

isn't affected by this because it adds the event listener directly to the .myClass elements, not a container. So it doesn't depend on the event bubbling to a container element. There would be a problem if .myClass had a child with a click handler that stops propagation -- when you click on that child, .myClass wouldn't get the event. Event delegation would also be blocked by this.

请注意，如果jQuery事件处理程序返回false，则等效于调用:

Note that if a jQuery event handler returns false, it's equivalent to calling:

event.preventDefault();
event.stopPropagation();

因此在您的示例中，由于您在#child处理程序中使用return false，因此可以防止事件冒泡到#parent，因此从#parent到#grandchild的事件委派失败.

So in your example, since you return false in the #child handler, it prevents the event from bubbling out to #parent, so the event delegation from #parent to #grandchild fails.

如果只需要执行一项或多项操作，则应在处理程序中显式执行此操作，而不是返回false.

If you only need to do one or the other, you should do it explicitly in the handler, rather than returning false.

您需要将设计更改为:

<div id="parent">
  <div id="child">
    <div id="intermediary">
        <div id="grandchild">The one</div>
    </div>
  </div>
</div>

那么你可以做:

$("#intermediary").on("click", ".grandchild", function() {
    ...
});

这不会受到#child处理程序的影响.

This would not be affected by the #child handler.

这篇关于jQuery中的委托事件绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！