jQuery .load() Come impedire il doppio caricamento dal doppio clic

Question

Sto usando la funzione jQuery load() per caricare alcune pagine nel contenitore. Ecco il codice:

$('div.next a').live('click',function() { 

    $('.content').load('page/3/ #info','',function(){ 
     //do something 
    }); 

return false; 

}); 

Tutto funziona bene, ma il problema è quando ho subito un doppio click sul collegamento div.next, dalla console vedo che carica la pagina due volte perché ho fatto un rapido doppio clic. Potrei anche fare 3 clic e sarà caricarlo 3 volte e mostrare in smth console del genere:

GET http://site/page/3/  200  OK 270ms 
GET http://site/page/3/  200  OK 260ms 

La mia domanda è come impedire ad un doppio clic e di non lasciare che caricare la pagina di destinazione più di una volta no importa quante volte è stato cliccato.

Grazie.

Answer 1

Qualunque cosa succedesse al buon vecchio JavaScript? Perché state tutti cercando di capirlo con puro jQuery?

var hasBeenClicked = false; 

$('div.next a').live('click',function() { 

    if(!hasBeenClicked){ 
     hasBeenClicked = true; 
     $('.content').load('page/3/ #info','',function(){ 
      //do something 
      //If you want it clickable AFTER it loads just uncomment the next line 
      //hasBeenClicked = false; 
     }); 
    } 

    return false; 
}); 

Come nota a margine, never never never uso .live(). Usa .delegate invece:

var hasBeenClicked = false; 

$('div.next').delegate('a','click',function() { 

    if(!hasBeenClicked){ 
     hasBeenClicked = true; 
     $('.content').load('page/3/ #info','',function(){ 
      //do something 
      //If you want it clickable AFTER it loads just uncomment the next line 
      //hasBeenClicked = false; 
     }); 
    } 

    return false; 
}); 

Perché? Paul Irish spiega: http://paulirish.com/2010/on-jquery-live/

Per rispondere a un commento ...

Questo potrebbe accadere se avete la vostra funzione di delegato nidificato all'interno della vostra chiamata AJAX (.load(), .get(), ecc). Il div.next deve essere sulla pagina affinché funzioni. Se div.next non è sulla pagina, e questo non è nidificato, solo fare questo:

$('#wrapper').delegate('div.next a','click',function() { 

http://api.jquery.com/delegate/

delegato ha bisogno il selettore di essere il genitore dell'elemento aggiunto in modo dinamico. Quindi, il primo parametro di delegato (div.next a nell'ultimo esempio) è l'elemento da cercare all'interno dell'elemento selezionato (#wrapper). Il wrapper potrebbe anche essere body se non è incluso in alcun elemento.

Answer 2

Si potrebbe sciogliere la manifestazione click con die():

$(this).die('click').click(function() { return False; }); 

Oppure si potrebbe dare l'elemento di una classe .clicked una volta che si fa clic:

$(this).addClass('clicked'); 

e verificare se quella classe esiste durante l'esecuzione il vostro logica:

$('div.next a').live('click',function() { 
    if (!$(this).is('.clicked')) { 
     $(this).addClass('clicked'); 

     $('.content').load('page/3/ #info','',function(){ 
      //do something 
     }); 
    } 

    return false; 
}); 

Answer 3

You co Vorrei provare ad usare il metodo jquery uno:

$("a.button").one("click", function() { 
     $('.content').load('page/3/ #info','',function(){ 
       //do something 
     }); 
}); 

Answer 4

Memorizza se stai aspettando il caricamento in una variabile.

(function() { 
    var waitingToLoad = false; 
    $('div.next a').live('click',function() { 

    if (!waitingToLoad) { 
     waitingToLoad = true; 
     $('.content').load('page/3/ #info','',function(){ 
      waitingToLoad = false; 
      //do something 
     }); 
    } 
    return false; 
    }); 

})()