Question

有人可以解释为什么这不起作用

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

这也行不通：

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

只有这样才有效：

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

但我需要每次都绑定动态事件处理。所以，请你解释为什么前两个不起作用？

（注意：它不适用于$('.delegetor')（即包装div）我尝试body和document只是为了确保委托人是静态的）

修改

从我对第一个答案的理解：

<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");});

点击事件不会到达孙子，因为它停在孩子身上？（我认为我没理解这一点）

Answer 1

事件委托通过将事件侦听器添加到将事件绑定到的静态容器元素来工作。它取决于从目标元素冒泡到容器元素的事件。当容器元素收到事件时，jQuery检查目标是否与选择器匹配，然后执行回调函数。

如果你有一个处于目标和容器之间的元素的处理程序，并且它调用了write("hello",string(david)). % possibly inaccurate，那么就会阻止事件进一步冒泡。因此事件永远不会到达容器，并且委托失败。

请注意，如果jQuery事件处理程序返回event.stopPropagation()，则它等同于调用：

false

如果你只需要做一个或另一个，你应该在处理程序中明确地执行它，而不是返回event.preventDefault(); event.stopPropagation();。

您需要将事件绑定到DOM层次结构中尽可能靠近目标元素的静态元素，并确保您没有任何插入元素以及停止传播的点击处理程序。

false

不受此影响，因为它将事件侦听器直接添加到$('.myClass').click(function() { ... });元素，而不是容器。因此它不依赖于冒泡到容器元素的事件。如果.myClass有一个孩子的点击处理程序停止传播，那么会会出现问题 - 当您点击该孩子时，.myClass将无法获得该事件。事件委托也将被此阻止。

请注意，如果jQuery事件处理程序返回.myClass，则它等同于调用：

false

因此，在您的示例中，由于event.preventDefault(); event.stopPropagation();处理程序中的return false，它会阻止事件冒出#child，因此事件从#parent委派给{ {1}}失败。

如果你只需要做一个或另一个，你应该在处理程序中明确地执行它，而不是返回#parent。

您需要将设计更改为：

#grandchild

然后你可以这样做：

false

这不受<div id="parent"> <div id="child"> <div id="intermediary"> <div id="grandchild">The one</div> </div> </div> </div>处理程序的影响。

在jQuery中委托事件绑定

1 个答案: