在jQueryAjax处理程序中获取对此的引用

我试图根据jqueryajax请求的返回代码切换和刷新div的内容

我认为我无法将“项”与ajax请求处理程序正确地联系起来。如何在“成功”处理程序中获取对“this”的引用

我认为这是因为成功句柄是异步执行的，“item”变量处于僵化状态

• 我有两个div，以add开头
• 当我在任何div上单击add时，它触发ajax请求，服务器处理它并返回success/error
• 成功后，我在div上切换add到remove
• 如果单击“删除”，则会发生相同的切换
• 在两个div上单击几下后，我发现我的ajax请求在一次单击add/remove时被触发了3-4次

我认为我在“项目”中添加div的方式可能就是问题所在。我不知道怎么了。我正在考虑如何为此编写JSFIDLE

我能够编写JSFIDLE并复制prolem。我已经在上面提到了我所期望的行为的用例。JSFIDLE

http://jsfiddle.net/nEMvD/14/

JS:

函数handleAdd（）{
$（“.add”）。单击（函数（e）{
var item=$（this.parents（“.item”）
$.ajax({
url:“/echo/html”，
成功：功能（数据）{
item.find（“.add”）.remove（）
项目.附加（“x”）
item.hide（）.show（）；
handleRemove（）
}
})
});
}
函数handleRemove（）{
$（“.remove”）。单击（函数（e）{
var item=$（this.parents（“.item”）
$.ajax({
url:“/echo/html”，
成功：功能（数据）{
item.find（“.remove”）.remove（）
项目。追加（“+”）
item.hide（）.show（）；
handleAdd（）
}
})
});
}
$（函数（）{
handleAdd（）
handleRemove（）
})

编辑：

---

我想我通过添加上下文解决了这个问题：在ajax请求中使用上下文，然后在处理程序中使用上下文。但是我会等待社区中其他更好的选择。

您的JS代码语法有错误，下面是正确的：

 $(".remove").click(function(e) {
    e.preventDefault();
    var item = $(this).parents(".item");
    var itemName = item.find(".itemName").text();
    $.ajax({
      url : "/ajax/removeItem/" + itemName,
      dataType : "text",
      success : function(data) {
        item.find(".remove").remove();
        item.append(
          "<div class='add'>" +
             "<span class='addHint'>some text</span>" +
          "</div>"
        );
        item.hide().show();
      }
      }
    );
  });

$（“.remove”）。单击（函数（e）{
e、 预防默认值（）；
var item=$（this.parents（“.item”）；
var itemName=item.find（“.itemName”）.text（）；
$.ajax({
url:“/ajax/removietem/”+itemName，
数据类型：“文本”，
成功：功能（数据）{
item.find（“.remove”）.remove（）；
item.append(
"" +
“一些文本”+
""
);
item.hide（）.show（）；
}
}
);
});

您的JS代码语法有错误，以下是正确的：

 $(".remove").click(function(e) {
    e.preventDefault();
    var item = $(this).parents(".item");
    var itemName = item.find(".itemName").text();
    $.ajax({
      url : "/ajax/removeItem/" + itemName,
      dataType : "text",
      success : function(data) {
        item.find(".remove").remove();
        item.append(
          "<div class='add'>" +
             "<span class='addHint'>some text</span>" +
          "</div>"
        );
        item.hide().show();
      }
      }
    );
  });

$（“.remove”）。单击（函数（e）{
e、 预防默认值（）；
var item=$（this.parents（“.item”）；
var itemName=item.find（“.itemName”）.text（）；
$.ajax({
url:“/ajax/removietem/”+itemName，
数据类型：“文本”，
成功：功能（数据）{
item.find（“.remove”）.remove（）；
item.append(
"" +
“一些文本”+
""
);
item.hide（）.show（）；
}
}
);
});

您可以在成功回调中引用item变量-这很正常。为什么你们说你们不能这样做呢？在浏览器控制台中检查，若你们看到错误，你们就会知道出了什么问题。您确实有JS错误。在jsfiddle.net中复制您的代码，您将看到它。我仍然在您的代码中看到4个以上的语法错误。查看示例html结构。。。您可以在success回调中引用item变量，这很正常。为什么你们说你们不能这样做呢？在浏览器控制台中检查，若你们看到错误，你们就会知道出了什么问题。您确实有JS错误。在jsfiddle.net中复制您的代码，您将看到它。我仍然在您的代码中看到4个以上的语法错误。查看示例html结构。。。他在语法方面有问题，他不使用逗号，而且在}）方面也有问题；我刚刚编辑了代码。这不是答案。他在语法上有问题，他忘记了逗号，还有}）的问题；我刚刚编辑了代码，这不是答案