jquery - .done 不更新按钮值

Question

$(document).ready(function(){
    $('.msg-buttons :button').on("click",function(event) {
        var id = $(this).attr("data-rel");

        $.get( "account/process-actions.php", { value: id } )
            .done(function( data ) {
                $(this).attr('value', data);
                //alert( "Data Loaded: " + data );
            });
    });
});

我想在按钮更改数据库中的值后更新按钮的值（有一组按钮）。

上述问题是 .done 似乎不允许“this”。它确实回发了数据，并且警报也有效。

Answer 1

this在 done 处理程序内部不引用单击的按钮。

解决方案 1. 使用闭包变量

$(document).ready(function () {
    $('.msg-buttons :button').on("click", function (event) {
        var id = $(this).attr("data-rel");

        var $this = $(this);
        $.get("account/process-actions.php", {
            value: id
        }).done(function (data) {
            $this.attr('value', data);
            //alert( "Data Loaded: " + data );
        });
    });
});

解决方案 2：使用$.proxy()将自定义执行上下文传递给回调方法

$(document).ready(function () {
    $('.msg-buttons :button').on("click", function (event) {
        var id = $(this).attr("data-rel");

        $.get("account/process-actions.php", {
            value: id
        }).done($.proxy(function (data) {
            $(this).attr('value', data);
            //alert( "Data Loaded: " + data );
        }, this));
    });
});

Answer 2

当您this在函数内部引用时done，它不会按预期工作，因为this现在处于与$('.msg-buttons :button')函数不同的范围内。如果您创建一个变量来引用它，它应该可以工作。尝试这个：

$(document).ready(function(){
    $('.msg-buttons :button').on("click",function(event) {
        var id = $(this).attr("data-rel");
        var self = this;

        $.get( "account/process-actions.php", { value: id } )
            .done(function( data ) {
                $(self).attr('value', data);
                //alert( "Data Loaded: " + data );
            });
    });
});

Answer 3

您已将 this 上下文存储在变量中并使用该变量。

$(document).ready(function(){
$('.msg-buttons :button').on("click",function(event) {
    var that = $(this);
    var id = that.attr("data-rel");

    $.get( "account/process-actions.php", { value: id } )
        .done(function( data ) {
            that.attr('value', data);
            //alert( "Data Loaded: " + data );
        });
});
});

希望这可以帮助。