jQuery的：對，直到從Ajax調用

Question

做jQuery中下面的響應單擊禁用Click事件：

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

}); 

，直到你收到來自Ajax調用的答案你怎麼能禁止click事件呢？所以，當你點擊按鈕時，它不僅會由於添加的類而「轉換」爲等待按鈕，而且點擊事件也會「暫停」......這可能嗎？

非常感謝您提前！

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

您可以添加一個標記來表示「正在加載」。你可以使用任何東西，如變量，屬性或屬性。在這個例子中，我使用jQuery .data()

此外，建議您使用submit事件，而不是在提交表單時向提交按鈕添加點擊處理程序。

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

});