Question

我正在尝试根据jquery ajax请求的返回代码切换和刷新div的内容。

我相信我无法将“item”与ajax请求处理程序正确绑定。如何在“成功”处理程序中引用“this”？

我认为是因为成功句柄是异步执行而“item”变量处于僵尸状态。

我有两个div，以add on开头

当我在任何div上单击添加时，它会触发ajax req，服务器处理它并返回成功/错误

成功后，我在div上切换添加删除

如果我点击删除
，就会发生相同的切换
点击两个div后，我发现我的ajax请求被点击了3-4次，只需点击一下即可添加/删除

我认为我将div添加到“item”的方式可能就是问题。我不知道出了什么问题。我正在考虑如何为此编写一个jsfiddle。

我能够编写一个jsFiddle并重现该问题。我已经提到上面的用例是我想要的行为。的jsfiddle

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

JS：

function handleAdd() {
$(".add").click(function(e) {
    var item = $(this).parents(".item")
    $.ajax({
        url: '/echo/html',
        success: function(data) {
          item.find(".add").remove()
          item.append("<div class='remove'>x</div>")
          item.hide().show();
          handleRemove()
        }
    })
});
}
function handleRemove() { 
$(".remove").click(function(e) {
    var item = $(this).parents(".item")
    $.ajax({
        url: '/echo/html',
        success: function(data) {
          item.find(".remove").remove()
          item.append("<div class='add'>+</div>")
          item.hide().show();
           handleAdd()
        }
    })
});
}

$(function() {
  handleAdd()
  handleRemove()
})

编辑：

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

Answer 1

您的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();
      }
      }
    );
  });

在jquery ajax处理程序中获取此参考

1 个答案: