更新按鈕使用ajax和data- *屬性

Question

我試圖做一個更新函數，而不是使用窗體，我使用data- *屬性和ajax。我只是想防止更新值後觸發按鈕，但我更新按鈕後，我的腳本有問題不應該被觸發，因爲輸入（數字）的值和我的按鈕的data- *屬性是已經一樣了。我希望你能幫助我。感謝提前:)

$('body').on('click', '.btn-edituser', function(){ 
var button = $(this); 
var upval = button.parent().prev().find('.data-avail').val();//get the value of the input(number) 
var updateId = button.data('updateid');// this is the user id to be pass on to the php file 
var tempAv = button.data('tempavail'); //doesn't get the new values after updating this is my PROBLEM 

if(upval != tempAv){ //check if the input(number) has been changes value/doesn't have the same value with the data attribute (temporary) 
    button.addClass('disabled'); 
    button.html('<i class="fa fa-refresh fa-spin"></i> Updating...'); 

    $.ajax({ 
     url:'./inc/update-avail.php', 
     type: 'POST', 
     data:{upval:upval, updateId:updateId}, 
     success:function(data){    
      button.removeClass('disabled'); 
      button.attr('data-tempavail', upval); //update the data attribute (temporary) 
      button.removeClass('btn-info').addClass('btn-success').html('<i class="fa fa-check"></i> Success'); 
      setTimeout(function(){     
       button.removeClass('btn-success').addClass('btn-info').html('<i class="fa fa-pencil"></i> Edit'); 
      }, 1000); 
     }   
    }); 
} }); 

Answer 1

在success:處理程序嘗試通過$.data，而不是$.attr稍後直接在屬性元素上設置一個數據將存儲信息。 所以代碼應該是這樣的：

success:function(data){    
    button.removeClass('disabled'); 
    button.data('tempavail', upval); //update the data which can be seen via button.data('tempavail') again on next button click 
    button.removeClass('btn-info').addClass('btn-success').html('<i class="fa fa-check"></i> Success'); 
    setTimeout(function(){     
     button.removeClass('btn-success').addClass('btn-info').html('<i class="fa fa-pencil"></i> Edit'); 
    }, 1000); 
}