jQuery .load() Comment éviter le double chargement en double-cliquant

Question

J'utilise la fonction jQuery load() pour charger certaines pages dans un conteneur. Voici le code:

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

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

return false; 

}); 

Tout fonctionne très bien, mais le problème est quand je rapidement double cliquer sur le lien div.next, de la console, je vois qu'il charge la page deux fois parce que je l'ai fait un double clic rapide. Je pourrais même en faire 3 clics et il va charger 3 fois et montrer à smth console comme ça:

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

Ma question est de savoir comment éviter ce double clic et de ne pas laisser charger la page cible plus d'une fois pas importe combien de fois il a été cliqué.

Merci.

Answer 1

Qu'est-il arrivé au bon vieux JavaScript? Pourquoi essaies-tu tous de le comprendre avec du jQuery pur?

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; 
}); 

Comme une note de côté, never never never utilisation .live(). Utilisez .delegate à la place comme:

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; 
}); 

Pourquoi? Paul Irish explique: http://paulirish.com/2010/on-jquery-live/

Pour répondre à votre commentaire ...

Cela pourrait se produire si vous avez votre fonction de délégué imbriqué dans l'appel AJAX (.load(), .get(), etc.). Le div.next doit être sur la page pour que cela fonctionne. Si div.next est pas sur la page, et ce n'est pas imbriqué, faites ceci:

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

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

délégué a besoin du sélecteur pour être le parent de l'élément dynamique ajouté. Ensuite, le premier paramètre du délégué (div.next a dans le dernier exemple) est l'élément à rechercher dans l'élément sélectionné (#wrapper). L'enveloppe peut également être body si elle n'est pas enveloppée dans un élément.

Answer 2

Vous pouvez délie l'événement click avec die():

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

Ou vous pourriez donner à l'élément une classe .clicked une fois qu'il est cliqué:

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

Et vérifier si cette classe existe lors de l'exécution de votre logique:

$('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

Vous co uld essayer d'utiliser la méthode jquery une:

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

Answer 4

Enregistrez si vous attendez le chargement d'une variable.

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

})()