Stop Ausbreitung auf Eltern Div, wenn Kinder durch $ (Körper) gebunden sind?

Question

Ich habe einen Container <div>, der divs dynamisch angehängt hat. Die divs sind click Handles durch das body Element, wie folgt: $(body).on("click",".divClass",function); (Ich tat es so, so dass die Bindungen auf die dynamisch hinzugefügten Elemente können alle an einer Stelle im Code erfolgen, und Tonnen von Bindungen zu verhindern). Ich muss ein auf das Container-Div setzen, so dass das Klick-Handle auf seinem Eltern nicht ausgelöst wird. Das Problem ist, wenn ich in die stopPropagation auf dem Container div, stoppt es das Kind div Auslösung (da es tatsächlich der Körper ist, der die Bindung hat, nicht die Kind div)

Hier ist eine Geige, die meine zeigt Problem:

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

ich die anderen Kinder wollen als normal propagieren, nur die Kinder in #B sollte nicht ausbreiten.

Wenn Sie dies berücksichtigen, war Ihr ursprünglicher Code nicht zu weit entfernt. Wenn Sie sehen, dass Sie direkt an #B in Ihrem Beispiel gebunden sind, gehe ich davon aus, dass #B statisch ist.

In diesem Fall #B als statische Referenz anstelle von body verwenden.

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

Ich denke, das ganze Problem viel einfacher wäre, wenn Sie den delegierte Handler #B an erster Stelle gebunden. Dann müssen die Ereignisse nicht auf die body und stopPropagation Blase den gewünschten Effekt haben.

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