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);
}

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

1 个答案: