jquery在ajax请求中失去$（this）的价值[重复]答案

【问题标题】：jquery losing value of $(this) on ajax request [duplicate]jquery在ajax请求中失去$（this）的价值[重复]
【发布时间】：2015-08-12 07:20:37
【问题描述】：

您好，我正在使用 jquery 向数据库发出 ajax 请求，以在数据库中添加和删除收藏夹。这很好用，但是我想替换锚链接中的部分href，以便用户可以在需要时再次添加/删除，而无需刷新页面，例如链接是这样构建的 http://article.local/favourite/delete/uniqueid 因此我需要用添加替换“删除”，反之亦然添加收藏按钮。但是我不能使用类名，否则这将适用于所有类，而不是当时单击的类。

$( ".remove-favourite" ).click(function(e) {
    e.preventDefault();
    var favform = $(this).parent('.fav-form-contents');
    $(favform).append("<img src='/images/loading.gif' class='form-loader' class='loading-icon'/>");                    

 $.ajax({
         type     : "POST",
         cache    : false,
         url      : $(this).attr('href'),
         data     : $(this).serialize(),
        success  : function(data) {
             $('.loading-icon').hide();
            $(this).attr('href').replace(/delete/, 'add');
            $(this).removeClass('remove-favourite').addClass('add-favourite');
        }
      })
}); // end click function

但是我得到的错误信息如下：

Uncaught TypeError: Cannot read property 'replace' of undefined

这表明它丢失了当前项目，关于我做错了什么有什么想法吗？

【问题讨论】：

请使用SO的搜索功能。这是这里最常见的问题之一。

标签： javascript jquery ajax replace

【解决方案1】：

您需要将$(this) 保留在一个变量中以供回调之类的

var $link = $(this);
$.ajax({
         type     : "POST",
         cache    : false,
         url      : $(this).attr('href'),
         data     : $(this).serialize(),
        success  : function(data) {
             $('.loading-icon').hide();
            $link.attr('href').replace(/delete/, 'add');
            $link.removeClass('remove-favourite').addClass('add-favourite');
        }
  })

this 本身将发生变化，因为$.ajax 中的success 回调的执行上下文与调用$.ajax 时不同。

【讨论】：

这不是因为“$.ajax 是异步的”...
@DenysSéguret，我说这是因为 success 回调 in $.ajax 是异步的。不是 $.ajax 本身
仍然完全错误^^
@DenysSéguret，你能解释一下或者给我一个链接吗？我真的很感激
@DenysSéguret，成功回调肯定不是同步的吗？

【解决方案2】：

将 this 设为具有 in 函数的全局手段

like var _this = $(this) 在 ajax 成功中使用

【讨论】：

不是一个好主意。可以有多个this 实例（不同的事物），并且使其全局化会搞砸一切。@AmmarCSE 的解决方案是最好的
我不能这么说 .assigning variable with in function
@AndreyPopov 阅读代码。 “全球”只是一个糟糕的词选择，它不是全球性的，只是在外部范围内。
咒骂也是一个糟糕的词选择，但人们会因此而受苦:) 没有“函数中的全局”这样的东西。这称为“成员”。全球意味着全球性的、直接的..

【解决方案3】：

ajax 内部的this 与xhr 对象相关。

使用ajax的context选项，

这个对象将是所有与 Ajax 相关的回调的上下文。默认情况下，上下文是一个表示 Ajax 设置的对象

$.ajax({
     context:this,
     ....

【讨论】：