Question

我正在尝试在执行ajax调用后单击时更改按钮的文本。为什么这不起作用？

HTML

<button type="submit" class="register-button">REGISTER</button>

JS

$(".register-button").click(function () 
{
    $.ajax({
        //some ajax stuff
    }).
    success(function(){
        console.log("done");
        $(this).html("Registered");
        //$(this).hide(); doesn't work either
    });
});

Answer 1

this内的

success不是按钮。试试这个 - 原谅双关语：

$(".register-button").click(function () 
{
        var thisButton = this;

        $.ajax({
            //some ajax stuff
        }).
        success(function(){
            console.log("done");
            $(thisButton).html("Registered");
            //$(this).hide(); doesn't work either
        });
});

Answer 2

this回调中的

success是传递给$.ajax的对象。你应该在以下之前继续引用你的元素：

$(".register-button").click(function () {
    var $elem = $(this);

    $.ajax({
        //some ajax stuff
    }).success(function(){
        console.log("done");
        $elem.html("Registered");
        $elem.hide();
    });
});

jsFiddle Demo

Answer 3

这需要新的范围。所以在函数声明之前存储它：

$(".register-button").click(function () 
{
    var that = this;
    $.ajax({
        //some ajax stuff
    }).
    success(function(){
        console.log("done");
        $(that).html("Registered");
        //$(that).hide(); should work
    });
});

Answer 4

试试这个：

$(".register-button").click(function () {
        var that=this;
        $.ajax({
            //some ajax stuff
            success:function(){
                console.log("done");
                $(that).html("Registered");
                $(that).hide();
            });
        })
});

单击时更改按钮的文本

4 个答案: