更新按钮使用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); 
}