jQuery: al hacer clic desactivar evento de clic hasta respuesta de llamada ajax

Question

Haciendo siguiente en 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); 
     } 
    }); 

}); 

¿Cómo puedes desactivar el evento click, así hasta que reciba una respuesta de la llamada AJAX? Entonces, cuando haces clic en el botón, no solo "se transforma" en un botón de espera debido a la clase agregada, sino que también el evento de clic se "pausa" ... ¿es esto posible?

¡Muchas gracias de antemano!

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

Puede agregar una marca para indicar "cargando actualmente". Puede usar cualquier cosa como una variable, propiedad o atributo. En este ejemplo, yo uso jQuery .data()

Además, es aconsejable que use el evento submit en lugar de agregar un controlador de clic al botón Enviar cuando envía un formulario.

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

});