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

在事件处理（beforeSend）， 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

Answer 2

没有更多关于上下文的知识或分析脚本本身：请记住，在某些环境中，$本身可能无法工作并且需要用jQuery替换 - 我在Liferay中已经看到了这一点。

我想这不是你的问题，但对于从其他环境中寻找这个问题的其他人来说，它可能会派上用场。