JavaScript StopPropagation no funciona con AJAX .LOAD

Question

solía .stopPropagataion() para detener el burbujeo en <li class="article"> Al hacer clic en el <a> etiqueta.

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

Con este html:

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

Todo funcionó bien, pero luego usé $('#div_id').load("div_html.html") Para cargar un poco de contenido en el Div dinámicamente. Ahora mi .stopPropagation() no deja de burbujear. ¿Por qué ya no funciona?

Answer 1

El problema es que cuando actualiza el contenido del div, destruyes todos los elementos que estaban dentro de él (incluidos los manejadores de eventos adjuntos a ellos). Tu código está enganchando el click evento en el a elementos que están en el div A partir de cuándo se ejecuta su código; nuevo a elementos en el div no se enganchará.

En su caso, es mejor que use delegate (Ejemplo en vivo, con load):

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

Que ganchan click sobre el div en cambio. Cuando ocurre el clic, burbujea desde el enlace al div, donde el controlador de clic creado por jQuery lo examina para ver si realmente era un clic en cualquier a elemento. Si es así, detiene el clic.

A partir de jQuery 1.7, la nueva sintaxis recomendada es on en cambio:

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

Tenga en cuenta que el orden de los argumentos es diferente de delegate, pero aparte de eso hace lo mismo.

---

Recomendaría evitar combinar a los manejadores DOM0 de estilo antiguo (atributos del controlador de eventos) con el código DOM2 nuevo (su manejador conectado con jQuery). En muchos navegadores, los dos mecanismos están algo separados y pueden no jugar tan bien juntos como quieran.

Otros dos comentarios sobre esto:

onlick="javascript:somefunction();"

1. Es onclick, no onlick (Te estás perdiendo el c)
2. No usas el javascript: Pseudoprotocol en los atributos del controlador de eventos, solo hrefs. Solo elimina esa parte. (¿Por qué no causa un error? puramente por coincidencia, es javascript válido: estás definiendo un etiqueta nunca usas.)