javascript lavoro stopPropagation does't con .load ajax

Question

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ù?

Answer 1

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();"

1. E 'onclick, non onlick (ti manca la c)
2. non si utilizza il javascript: pseudo-protocollo sugli attributi del gestore di eventi, solo hrefs. Basta rimuovere quella parte. (Perché non causa un errore perché puro caso , è valida JavaScript -? Si sta definendo un etichetta non si utilizza mai.)