JavaScript StopPropagation funktioniert nicht mit Ajax .load

Question

ich benutzte .stopPropagataion() das sprudeln <li class="article"> Beim Klicken auf die <a> Schild.

$(document).ready(function(){
   $(".article a").click(function(e) {
        e.stopPropagation();
   });
});

Mit dieser HTML:

<li class="article" onlick="javascript:somefunction();">
   <div id="div_id">
      <a>Some link</a>
   </div>
</li>

Alles hat gut funktioniert, aber dann habe ich benutzt $('#div_id').load("div_html.html") Um einige Inhalte dynamisch in den Div zu laden. Jetzt mein .stopPropagation() Hält das Blasen nicht auf. Warum funktioniert es nicht mehr?

Answer 1

Das Problem ist, dass wenn Sie den Inhalt der aktualisieren div, Sie zerstören alle Elemente, die sich darin befanden (einschließlich aller an sie verbundenen Ereignishandler). Ihr Code hängt die an click Ereignis auf der a Elemente, die in der sind div Zum Zeitpunkt, an dem Ihr Code ausgeführt wird; Neu a Elemente in der div wird nicht angeschlossen.

In Ihrem Fall sind Sie besser dran, wenn Sie besser sind delegate (Live -Beispiel mit load):

$(document).ready(function(){
   $(".article div").delegate("a", "click", function(e) {
        e.stopPropagation();
   });
});

Das haken click auf der div stattdessen. Wenn der Klick auftritt, sprudeln er vom Link zum Link zu dem div, wobei der von JQuery erstellte Klickhandler untersucht wird, um festzustellen, ob es sich tatsächlich um einen Klick handelt a Element. Wenn ja, stoppt es den Klick.

Ab JQuery 1.7 ist die neue empfohlene Syntax on stattdessen:

$(document).ready(function(){
   $(".article div").on("click", "a", function(e) {
        e.stopPropagation();
   });
});

Beachten Sie, dass sich die Reihenfolge der Argumente unterscheidet von delegate, Aber ansonsten macht es dasselbe.

---

Ich würde empfehlen, die Kombination von DOM0-Handlern im alten Stil (Event-Handler-Attribute) mit dem DOM2-Code im neuen Stil (Ihrem mit JQuery angeschlossenen Handler) zu vermeiden. In vielen Browsern sind die beiden Mechanismen etwas getrennt und spielen möglicherweise nicht so gut zusammen, wie Sie möchten.

Zwei weitere Kommentare dazu:

onlick="javascript:somefunction();"

1. Es ist onclick, nicht onlick (Sie vermissen die c)
2. Sie verwenden das nicht javascript: Pseudo-Protokoll auf Event-Handler-Attribute nur hrefs. Entfernen Sie diesen Teil einfach. (Warum verursacht es keinen Fehler? Weil rein Zufall, Es ist gültig JavaScript - Sie definieren a Etikett Sie verwenden nie.)