jQuery Ajax 成功问题

Question

为什么以下脚本通过去除相关的HTML实体可以在客户端工作：

$(".ui-delete").click(function() {

    $.ajax({
        url: 'delete.aspx',
        type: 'POST',
        data: { strWidgetID:$(this).parents(".widget").attr("id") },
        error: function() { alert('Error'); },
        success: function() { alert('Success'); }
    });


    $(this).parents(".widget:first").remove();
});

但是以下查询语句“更加正确”，如果删除HTML实体，将不起作用？

$(".ui-delete").click(function() {

    $.ajax({
        url: 'delete.aspx',
        type: 'POST',
        data: { strWidgetID:$(this).parents(".widget").attr("id") },
        error: function() { alert('Error'); },
        success: function() {
            alert('Success');
            $(this).parents(".widget:first").remove();
        }
    });

});

第一个脚本在客户端和服务器端都能正确执行，第二个脚本在服务器端能正确执行，但是在客户端只显示一个警告"success"，但不会移除html实体"widget"。有什么想法吗？

- oshirowanen

---

http://stackoverflow.com/editing-help -- 使用四个空格缩进代码以正确显示。由于您是新来的（欢迎！），我已经为您修复了这个问题。 - T.J. Crowder

$(this)可能不是你想象的那样。在那里设置断点并检查。 - David Perlman

Answer 1

在成功处理程序中，this 不再是您点击处理程序中的对象（它是 $.ajax 使用的 XMLHttpRequest 对象）。

在 $.ajax 调用之前捕获对您感兴趣的 this 的引用：

$(".ui-delete").click(function() {
  var that = this;

  $.ajax({
    // etc.
    success: function() {
      $(that).parents('.widget:first').remove();
    }
  });
};

- Dave Ward

Answer 2

根据上下文，$(this) 指的是不同的对象。请查看此链接 这是什么？ 在第二个代码示例中，this 指的是 ajax 设置对象而不是 'ui-delete' 元素。

- chedine