Question

为什么以下脚本通过删除relievant 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();
        }
    });

});

第一个脚本正确地执行客户端和服务器端，第二个脚本正确地执行服务器，但在客户端，它只显示警报“成功”，但不删除html实体“小部件”

有什么想法吗？

Answer 1

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

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

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

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

Answer 2

根据上下文，$（this）引用不同的对象。查看此链接What is this? 在第二个代码示例中，这指的是ajax设置对象，而不是'ui-delete'元素。

jquery ajax成功问题

2 个答案: