javascript - 当 child 通过 $(body) 绑定(bind)时，停止在父 div 上传播？

Question

我有一个容器 <div>已动态附加 div。给定 div click通过 body 处理元素，像这样:$(body).on("click",".divClass",function); (我这样做是为了让动态添加的元素的绑定(bind)可以在代码中的一个地方全部完成，并防止大量绑定(bind))。我需要放一个 stopPropagation()在容器 div 上，这样就不会触发其父级上的点击句柄。问题是，当我输入 stopPropagation在容器 div 上，它阻止子 div 触发(因为它实际上是 body 具有绑定(bind)，而不是子 div)

这是一个演示我的问题的 fiddle :

$("#A").click(function() {

  console.log('This event should not fire when clicking innermost')

});

$("#B").click(function(e) {

  e.stopPropagation();

});

$("body").on("click", "#C", function() {

  console.log('This event should fire when clicking innermost')

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
  outermost&nbsp;
  <div id="B">
    middle&nbsp;
    <div id="C">
      innermost
    </div>
  </div>
</div>

Answer 1

I want the other children to propagate as normal, only the children in #B should not propagate.

考虑到这一点，您的原始代码并不太远。看到您在示例中直接绑定(bind)到 #B，我假设 #B 是静态的。

在这种情况下，使用#B 作为静态引用而不是body。

$("#A").click(function(e) {
  console.log('This event should not fire when clicking innermost')
});

$("#B").click(function(e) {
  e.stopPropagation();
});

$("#B").on("click", "#C", function(e) {
    console.log('This event should fire when clicking innermost')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
  outermost&nbsp;
  <div id="B">
    middle&nbsp;
    <div id="C">
      innermost
    </div>
  </div>
</div>