javascript lavoro stopPropagation does't con .load ajax
-
26-10-2019 - |
Domanda
ho usato .stopPropagataion()
per fermare il gorgogliare in <li class="article">
quando si fa clic sul tag <a>
.
$(document).ready(function(){
$(".article a").click(function(e) {
e.stopPropagation();
});
});
Con questo HTML:
<li class="article" onlick="javascript:somefunction();">
<div id="div_id">
<a>Some link</a>
</div>
</li>
Tutto ha funzionato bene, ma poi ho usato $('#div_id').load("div_html.html")
per caricare alcuni contenuti nel div in modo dinamico. Ora il mio .stopPropagation()
non si ferma il gorgogliare. Perché non sta funzionando più?
Soluzione
Il problema è che quando si aggiorna il contenuto del div
, distruggi tutti gli elementi che erano al suo interno (comprese eventuali gestori di eventi ad essi). Il codice è agganciando l'evento click
sugli elementi a
che si trovano nella div
come di quando le corse codice ; nuovi elementi a
nel div
non saranno agganciati.
Nel tuo caso, è meglio usare delegate
( esempio dal vivo, con load
):
$(document).ready(function(){
$(".article div").delegate("a", "click", function(e) {
e.stopPropagation();
});
});
che si aggancia click
sul div
invece. Quando si verifica il clic, bolle dal collegamento al div
, dove il gestore di clic creato da jQuery esamina per vedere se era in realtà un click su qualsiasi elemento a
. Se è così, si ferma il clic.
Come di jQuery 1.7, la nuova sintassi raccomandata è on
invece:
$(document).ready(function(){
$(".article div").on("click", "a", function(e) {
e.stopPropagation();
});
});
Si noti che l'ordine degli argomenti è diverso da delegate
, ma diverso da quello che fa la stessa cosa.
mi consiglia di evitare che conciliano vecchio stile Dom0 gestori (attributi del gestore di eventi) con il nuovo stile di codice DOM2 (vostro gestore allegato con jQuery). In molti browser, i due meccanismi sono un po 'separati e non possono giocare come bene insieme come vuoi.
Due altri commenti su questo:
onlick="javascript:somefunction();"
- E '
onclick
, nononlick
(ti manca lac
) - non si utilizza il
javascript:
pseudo-protocollo sugli attributi del gestore di eventi, solohref
s. Basta rimuovere quella parte. (Perché non causa un errore perché puro caso , è valida JavaScript -? Si sta definendo un etichetta non si utilizza mai.)