jQuery: al clic disabilita evento click fino risposta da Ajax chiamata

Question

Facendo seguito in jQuery:

$('#signupbox1').on('click', '#signup1', function() { 

    var str = $('#signupform').serialize(); 

    // make it look like a waiting button 
    $('#signup1').addClass("btn_wait"); 
    var btn_val = $('#signup1').val(); 
    $('#signup1').val(''); 

    $.ajax({ 
     type: "POST", 
     url: "signup_step1.php", 
     data: str, 
     success: function(msg) { 

      //doing stuff here 

     $('#signup1').removeClass("btn_wait"); 
     $('#signup1').val(btn_val); 
     } 
    }); 

}); 

Come hai potuto disattivare l'evento click così finché si riceve una risposta dalla chiamata AJAX? Quindi, quando fai clic sul pulsante, non solo "trasforma" in un pulsante di attesa a causa della classe aggiunta, ma anche l'evento di clic verrà "messo in pausa" ... è possibile?

Grazie mille in anticipo!

Answer 1

$('#signupbox1').on('click', '#signup1', function() { 

    var str = $('#signupform').serialize(); 

    // make it look like a waiting button 
    var btn_val = $('#signup1').val(); 
    $('#signup1').addClass("btn_wait").val('').unbind('click'); 

    $.ajax({ 
     type: "POST", 
     url: "signup_step1.php", 
     data: str, 
     success: function(msg) { 
      $('#signup1').removeClass("btn_wait").val(btn_val); 
     }, 
     complete: function() { 
      $('#signup1').bind('click'); // will fire either on success or error 
     } 
    }); 

}); 

Answer 2

È possibile aggiungere un flag per indicare "attualmente in fase di caricamento". Puoi usare qualsiasi cosa come una variabile, una proprietà o un attributo. In questo esempio, utilizzo jQuery .data()

Inoltre, è consigliabile utilizzare l'evento submit anziché aggiungere un gestore di clic al pulsante di invio quando si invia un modulo.

$('#signupform').on('submit', function() { 

    var form = $(this), 
     loading = form.data('loading'), //check loading status 
     str, button, val; 

    //if not loading 
    if(!loading){ 

     //set loading to true 
     form.data('loading',true); 

     str = form.serialize(); 
     button = $('#signup1', form); 
     val = button.val(); 

     // make it look like a waiting button 
     button 
      .addClass("btn_wait"); 
      .val(''); 

     $.ajax({ 
      type: "POST", 
      url: "signup_step1.php", 
      data: str, 
      success: function(msg) { 

       //remove loading state 
       form.data('loading',false); 

       //return button to normal 
       button 
        .removeClass("btn_wait"); 
        .val(val); 
      } 
     }); 
    } 

});