javascript travail stopPropagation de does't avec ajax .load

Question

J'utilisé .stopPropagataion() pour arrêter le bouillonnement dans <li class="article"> en cliquant sur l'étiquette <a>.

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

Avec ce code HTML:

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

Tout fonctionnait bien, mais j'utilisé $('#div_id').load("div_html.html") pour charger un contenu dans la div dynamique. Maintenant, mon .stopPropagation() n'arrête pas le bouillonnement. Pourquoi ça ne fonctionne plus?

Answer 1

Le problème est que lorsque vous mettez à jour le contenu du div, vous détruisez tous les éléments qui étaient à l'intérieur (y compris les gestionnaires d'événements qui leur sont rattachés). Votre code hooking l'événement click sur les éléments a qui sont div à partir de quand l'exécution de votre code ; de nouveaux éléments de a dans le div ne seront pas raccordés.

Dans votre cas, vous êtes mieux d'utiliser delegate ( exemple en direct, avec load ):

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

Ce crochets click sur le div à la place. Lorsque le clic se produit, il bouillonne du lien vers le div, où le gestionnaire de clic créé par jQuery l'examine pour voir si elle était en fait un clic sur un élément de a. Si oui, il arrête le clic.

de jQuery 1.7, la nouvelle syntaxe recommandée est on place:

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

Notez que l'ordre des arguments est différent de delegate, mais à part qu'il fait la même chose.

---

Je vous recommande d'éviter combinaison de style ancien gestionnaires DOM0 (attributs de gestionnaire d'événements) avec le nouveau style de code DOM2 (votre gestionnaire attaché avec jQuery). Dans de nombreux navigateurs, les deux mécanismes sont un peu séparés et ne peuvent pas jouer ensemble sans que vous le souhaitez.

Deux autres commentaires à ce sujet:

onlick="javascript:somefunction();"

1. de onclick, pas onlick (vous manque le c)
2. Vous ne pas utiliser le pseudo-protocole javascript: sur les attributs de gestionnaire d'événements, seulement hrefs. Il suffit de retirer cette partie. (Pourquoi ne pas provoquer une erreur parce que purement par hasard , il est valide JavaScript - vous définissez un étiquette vous n'utilisez jamais.)