使用ajax和data-*属性更新按钮

我试图使一个更新功能，而不是使用表单，我使用data-*属性和ajax。我只是想防止按钮在我更新值后触发，但我有一个问题，我的脚本更新按钮后不应该被触发，因为输入(数字)的值和我的按钮的数据-*属性已经是相同的。我希望你们能帮我。提前感谢:)

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