jQuery .load() Cómo evitar la doble carga al hacer doble clic en

Question

Estoy utilizando la función jQuery load() para cargar algunas páginas en el contenedor. Aquí está el código:

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

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

return false; 

}); 

Todo funciona muy bien, pero el problema es cuando rápidamente doble clic sobre el enlace div.next, desde la consola veo que carga la página dos veces porque hice una rápida doble clic. Incluso podría poner el partido 3 clics y lo cargará 3 veces y mostrar en Smth consola así:

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

Mi pregunta es cómo prevenir tales doble clic y no dejar que cargue la página de destino más de una vez sin importa cuántas veces se hizo clic.

Gracias.

Answer 1

¿Qué pasó con good ol 'JavaScript? ¿Por qué todos intentan descubrirlo con jQuery puro?

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

Como nota al margen, nunca nunca nunca.live() uso. Utilice .delegate en su lugar como:

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

¿Por qué? Paul irlandesa explica: http://paulirish.com/2010/on-jquery-live/

para responder a su comentario ...

Esto podría suceder si usted tiene su función delegada anidado dentro de su llamada AJAX (.load(), .get(), etc). El div.next tiene que estar en la página para que esto funcione. Si no es div.next en la página, y esto no está anidado, simplemente hacer esto:

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

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

Delegado necesita el selector de ser el padre del elemento añadido de forma dinámica. Entonces, el primer parámetro de delegado (div.next a en el último ejemplo) es el elemento a buscar dentro del elemento seleccionado (#wrapper). El contenedor también podría ser body si no está envuelto en ningún elemento.

Answer 2

Se puede desenlazar el caso click con die():

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

O bien, podría dar al elemento una clase .clicked una vez que se hace clic en:

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

Y comprobar si existe esa clase al realizar su lógica:

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

Usted co uld intente utilizar el método jquery one:

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

Answer 4

Almacene si está esperando la carga en una 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; 
    }); 

})()