JavaScript Jquery 不起作用。 $(这个)

Question

$(document).ready(function() {
    $(".delete_user_button").click(function(){
        var username_to_delete = $(this).attr('rel');
        $.ajax({
            type:"POST",
            url:"/delete/",
            data:{'username_to_delete':username_to_delete},
            beforeSend:function() {
                $(this).val("Removing...");
            },
            success:function(html){
                $("div.delete_div[rel=" + username_to_delete + "]").remove();
            }
            });
        return false;
    });
});

为什么 $(this).val() 不起作用？我试图在用户单击“删除”时更改按钮的文本。

Answer 1

在事件处理程序中(发送之前)，this 指的是用于 ajax 调用的 XMLHttpRequest 对象，而不是单击事件处理程序的原始 this。您应该首先将其“捕获”在变量中:

$(document).ready(function() {
    $(".delete_user_button").click(function(){
        var element = $(this);
        var username_to_delete = element.attr('rel');
        $.ajax({
            type:"POST",
            url:"/delete/",
            data:{'username_to_delete':username_to_delete},
            beforeSend:function() {
                element.val("Removing...");
            },
            success:function(html){
                $("div.delete_div[rel=" + username_to_delete + "]").remove();
            }
            });
        return false;
    });
});

这种机制称为“闭包”。有关此内容的有趣解释，请查看此链接:

http://www.bennadel.com/blog/1482-A-Graphical-Explanation-Of-Javascript-Closures-In-A-jQuery-Context.htm