Refire ready event after AJAX reload

Question

Ho ricercato altri thread e sono solo confuso.

Situazione: Fornisco un plugin jQuery generico che carica il div specificato dall'utente in modo dinamico tramite AJAX. Tutto funziona bene, ma ad es. la pagina di un utente, c'è un pezzo di JS che non viene chiamato, perché l'evento "pronto" non viene rifatto.

La situazione normale sarà che gli altri elementi jQuery dell'utente verranno posizionati dopo jQuery (documento) .ready. chiamata

ho appena provato:

$(document).trigger('ready'); 

manualmente - non ha effetti a tutti, come presumo che "pronto" è chiamato solo una volta e solo una volta.

Qual è il modo corretto di gestirlo? (sarebbe bello per fornire la soluzione più generica possibile)

mi piacerebbe fare qualcosa di simile suggerito in questa discussione:

Trigger $document.ready (so AJAX code I can't modify is executed)

Ma penso che readyList ora è privata e può essere manipolato direttamente più?

Vale la pena ricordare che il plugin che sto fornendo fornisce una funzionalità di callback per l'utente. Naturalmente, (s) potrebbe inserire il codice JS per la gestione del post-caricamento.

Grazie in anticipo e cordiali saluti

Answer 1

Non tentare di ricaricare l'intera funzione pronta DOM. Particolarmente dannosa è la natura degli eventi n + n se lo hai fatto, 2 eventi click sullo stesso elemento, ad esempio potrebbero potenzialmente diventare 4, quindi 8 ecc. Se la funzione DOM ready è ripetutamente ri-attivata da loro.

È possibile evitare questo eliminando il codice che è necessario eseguire una volta terminata la chiamata ajax e presumibilmente la popolazione dell'elemento che si spera possa beneficiare dell'evento che si desidera reinizializzare .

$(document).ready(function() 
{ 
    initialise(); 

    //... Resume with DOM ready 
}); 

function initialise() 
{ 
    // create event here that needs re-initialising 
} 

Così, quando hai finito con la vostra chiamata AJAX basta chiamare di nuovo initialise().

In alternativa, è possibile utilizzare .on e utilizzare le sue funzionalità di bubbling up, questo è il modo in cui gestirò questo tipo di problema. Evita di dover pensare a "reinizializzare" qualsiasi parte delle funzioni pronte per il DOM nei tuoi script.

aggiuntive da commenti

.on consente di associare gli eventi agli elementi di basso livello nella pagina che non cambiano in qualsiasi momento, pur consentendo di controllare quali degli elementi dinamici in realtà attivare l'evento all'interno di tale contenitore.

<div id="container"> 

    <div id="ajax-content"> 

     <a href="#" class="created-link">A new link</a> 

    </div> 

</div> 

così sappiamo che il <a> è stato creato da una funzione ajax dopo l'evento ready DOM è sparato, quindi, tutti gli eventi diretti applicate ad esso, allora non avrebbero funzionato.

Invece dovremmo associare l'evento a un elemento di livello inferiore invariato e creare bolle fino all'elemento DOM dinamico che lo contiene.

$('#container').on('click', '.created-link', function(event) 
{ 
    event.preventDefault(); 

    // Your normal onclick code 
}); 

Answer 2

Sembra che il collegamento con # come href non funzioni. Prenditi cura di questo. :)

Answer 3

solo per condividere i miei risultati e la soluzione, ho avuto lo stesso problema che dopo un AJAX ricarica la funzione $ (documento) .ready non si chiama per questo problema ho usato combinazioni di queste due risposte, e in alla fine ha trovato una soluzione molto semplice

• from this thread the answer from David Barker
• from another thread the answer from Nick Young

la mia soluzione simile a questa

0.123.

<script type="text/javascript"> 
function initialise(){ 
    $('.clickableItem').click(function(){ 
     /* do code here */ 
     return false; 
    }); 
}; 
$(document).ready(function(){ 
    initialise(); 
}); 
$(document).ajaxComplete(function() { 
    initialise(); 
}); 
</script> 

spero che questo aiuti qualcuno