JavaScript StopPropagation no funciona con AJAX .LOAD
-
26-10-2019 - |
Pregunta
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?
Solución
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();"
- Es
onclick
, noonlick
(Te estás perdiendo elc
) - No usas el
javascript:
Pseudoprotocol en los atributos del controlador de eventos, solohref
s. Solo elimina esa parte. (¿Por qué no causa un error? puramente por coincidencia, es javascript válido: estás definiendo un etiqueta nunca usas.)