1

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

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

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

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

我认为我将 div 添加到“项目”的方式可能是问题所在。我不知道出了什么问题。我正在考虑如何为此编写一个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 请求中添加 context:this 然后在处理程序中使用 this 解决了这个问题。但我会等待社区提供任何其他更好的选择。

4

1 回答 1

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();
      }
      }
    );
  });
于 2013-08-26T02:20:53.017 回答