Problema di caricamento di Jquery AJAX

Question

Sto provando a caricare tutte le pagine del mio sito Web utilizzando il metodo jload di .Quindi, ecco come appare il mio sito Web:

<script type="text/javascript">  
  $(function() {
    $('.link').bind('click', function(e) {
            var page = $(this).attr('href');
            $('#site').addClass('loading');
            $('#content').load(page, function (){
            $('#site').removeClass('loading');
    });

    e.preventDefault();
    return false;
  });

<a href="test.php" class="link">Test</a>

Con questo codice, ogni link che ottiene class = " link " caricherò la mia pagina sul div #content. Funziona bene! Nessun problema, ma quando carico test.php, se uso il link class = " " su qualsiasi link, pulsante o altro, semplicemente non funziona e la nuova pagina viene caricata al di fuori del mio #content.

Hai già provato a copiarlo nel file appena caricato e non funziona, qualcuno ha un suggerimento?

Grazie

Answer 1

Questo perché quando si associa un evento, esso si lega solo agli elementi presenti nel DOM in quel momento. Quindi, se ne aggiungi altri in seguito, questi non saranno associati all'evento che hai precedentemente collegato. Supponendo che tu abbia jQuery 1.3, ha una funzione integrata per aggirare questo chiamato live . Con esso, puoi associare un evento a tutti gli elementi attuali e futuri. Non supporta tutti gli eventi, ma clic supporta.

Quindi, tenendo presente questo, devi solo sostituire questo:

$('.link').bind('click', function(e) {

Con questo:

$('a.link').live('click', function(e) {

(Ho aggiunto la a al selettore perché è molto più efficiente specificare il tag se possibile)

Se non si dispone di jQuery 1.3, è necessario eseguire l'aggiornamento il prima possibile. Se non ci riesci, dai un'occhiata al plug-in livequery che ottiene la stessa cosa ma in modo meno elegante. In alternativa, puoi semplicemente avere una funzione per associare l'azione e chiamarla ogni volta che carichi nuovi dati. Tutto considerato, tuttavia, live di jQuery è il modo migliore per farlo.