在jQuery中委托事件绑定

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

$(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来确保委托者是静态的）

编辑

从我从第一个答案中理解：

   The one

如果我做

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

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

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

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

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

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

如果您只需要执行其中一个，则应该在处理程序中显式执行，而不是返回false 。

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

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

不受此影响，因为它将事件侦听器直接添加到.myClass元素，而不是容器。因此它不依赖于冒泡到容器元素的事件。如果.myClass有一个带有点击处理程序停止传播的孩子会有问题 – 当你点击那个孩子时， .myClass就不会得到这个事件。事件委托也将被此阻止。

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

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

因此，在您的示例中，由于您在#child处理程序中return false ，因此它会阻止事件冒泡到#parent ，因此从#parent到#grandchild的事件委派#grandchild失败。

如果您只需要执行其中一个，则应该在处理程序中显式执行，而不是返回false 。

您需要将设计更改为：

    The one

然后你可以这样做：

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

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