子が$（body）を介してバインドされている場合、親divの伝播を停止しますか？

Question

divを動的に追加したコンテナ<div>があります。 div35には、のようにbody要素を使ってclickハンドルが与えられます（このようにして、動的に追加された要素のバインディングをコード内のすべての場所で実行できるようにし、多数のバインディングを防ぐことができます）。 stopPropagation()をコンテナdivに配置して、親のクリックハンドルがトリガされないようにする必要があります。問題は、コンテナdivのstopPropagationを入れると、子divがトリガーされなくなります（実際にはバインディングを持つボディであり、子divではないので）。

ここに私のことを示すフィドルです問題：

$("#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

私は他の子供たちは、通常のように伝播したい、だけ #Bの子供たちが伝播するべきではありません。

これを考慮すると、元のコードはそれほど離れていませんでした。あなたの例では#Bに直接バインドされているのを見て、私は#Bが静的​​であると仮定します。

この場合、bodyの代わりに#Bをスタティックリファレンスとして使用します。

$("#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>

Answer 2

私はあなたが最初の場所で#Bに委任ハンドラをバインドされている場合、この問題全体がはるかに簡単だと思います。その後、イベントはbodyまでバブルする必要はなく、stopPropagationは望ましい効果があります。

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

 
$("#B").on("click", "#C", function(e) { 
 
    e.stopPropagation(); 
 
    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>