在 Jquery 结合 $.get 与 $(this).remove() 打破 $(this)答案

【问题标题】：In Jquery combining $.get with $(this).remove() breaks $(this)在 Jquery 结合 $.get 与 $(this).remove() 打破 $(this)
【发布时间】：2012-03-23 02:54:48
【问题描述】：

我想删除 HTML 表格行中显示的一些数据（首先在数据库中，然后从 HTML 表格中删除）。我已经为每个 HTML 表格行添加了一个删除链接，当点击这个链接时，我想首先制作一个 jQuery $.get 来更新数据库，如果返回成功，那么我想要删除 HTML 行。我已经让每个部分分别成功地工作，但是当我尝试组合它们时，我遇到了麻烦。合并后，进行 AJAX 调用以更新数据库的部分可以工作，但执行 $(this).remove() 的部分不能工作。我可以看到，在调用 $(this).remove() 的那一刻，$(this) 的值指的是 $.get，当我知道我需要它来指代“.delete_link”时。但我不知道如何改变这一点。显然，我正在为 jQuery 的一些基础知识而苦苦挣扎。我尝试将每个部分分解为组件函数，但这似乎使事情变得更糟。

  $(document).ready(function() {
    $(".delete_link").click(function () {
      if (confirm('Are you sure???')) {
        $.get("/comments/ajax-delete-comment?comment_id=4220537", function(response) {
            if (response == 1) {
              alert("Couldn't update database");
            } else {
              $(this).closest('tr').fadeTo(400, 0, function () {
                $(this).remove();
              });
            }
        });


        return false;
      }
      return false;
    });
  });

【问题讨论】：

旁白：您可能希望将data 选项/参数与$.get 一起使用，而不是在URL 中使用查询字符串。
在回调内部，this 与外部不同。
$(this) doesn't work in a function 的完全重复 - 这个问题已经被问过无数次了。
在$.get()调用之前设置var cLink = $(this);，并在回调中使用cLink.closest(...)和cLink.remove();。
@RobW 相信我，我搜索过。知道正确的关键字是解决方案的一部分。我不是一个懒散地问问题或浪费人们时间的人。

标签： jquery

【解决方案1】：

只需在变量中捕获this。

if (confirm('Are you sure???')) {
    var that = $(this);
    $.get("/comments/ajax-delete-comment?comment_id=4220537", function(response) {
        if (response == 1) {
            alert("Couldn't update database");
        } else {
            that.closest('tr').fadeTo(400, 0, function() {
                $(this).remove();
            });
        }
    });


    return false;
}

【讨论】：

谢谢。我注意到您保留了 $(this).remove() - 为什么？
不客气！没什么区别，但对我来说，在这种情况下提醒我对fadeTo 的回调范围很有帮助。
对，不过我有点困惑。 $(this) 是否以某种方式重新分配了正确的值？
是的！ :) 一旦你调用fadeTo，其回调中的this 会自动引用你的链正在操作的元素； jQuery 链的默认行为。
其实看看这篇文章：tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

【解决方案2】：

您应该将 $(this) 存储在一个变量中：

$(document).ready(function() {
    $(".delete_link").click(function () {
      if (confirm('Are you sure???')) {

        var $link = $(this);

        $.get("/comments/ajax-delete-comment?comment_id=4220537", function(response) {
            // THIS in this context is jQuery not the link you want

            if (response == 1) {
              alert("Couldn't update database");
            } else {
              $link.closest('tr').fadeTo(400, 0, function () {
                $link.remove();
              });
            }
        });


        return false;
      }
      return false;
    });
});

【讨论】：

你真的应该这样做var $link = $(this)。
谢谢。最初我认为您的答案与 SimpleCoder 的答案相同，但我看到变量前面有一个 $，他/她只有一个“那个”。它们都是正确的解决方案吗？
是的，$ 只是程序员的约定。更容易看出该变量是 jQuery 对象。 Javascript 不在乎你为变量命名。
@papirtiger 感谢您的解释！

【解决方案3】：

尝试在点击时缓存this

 $(document).ready(function() {
    $(".delete_link").click(function () {
      var $this=$(this);
      if (confirm('Are you sure???')) {
        $.get("/comments/ajax-delete-comment?comment_id=4220537", function(response) {
            if (response == 1) {
              alert("Couldn't update database");
            } else {
              $this.closest('tr').fadeTo(400, 0, function () {
                $this.remove();
              });
            }
        });


        return false;
      }
      return false;
    });
  });

【讨论】：

你真的应该这样做var $this = $(this);
谢谢。最初我认为您的答案与 SimpleCoder 的答案相同，但我看到变量前面有一个 $，他/她只有一个“那个”。它们都是正确的解决方案吗？
@BrianFenton 是的，两者都是相同的解决方案var $this 和 var that 是相同的东西

【解决方案4】：

  $(document).ready(function() {
    $(".delete_link").click(function () {
      var delIndex = $(this).index();

      if (confirm('Are you sure???')) {
        $.get("/comments/ajax-delete-comment?comment_id=4220537", function(response) {
            if (response == 1) {
              alert("Couldn't update database");
            } else {
              $('.delete_link').eq(delIndex).closest('tr').fadeTo(400, 0, function () {
                $('.delete_link').eq(delIndex).remove();
              });
            }
        });


        return false;
      }
      return false;
    });
  });

【讨论】：

将this 保存在var 中比在DOM 中再次查找$('.delete_link') 更快。
谢谢你，但我认为其他答案更优雅。

【解决方案5】：

在$.get 回调中，this 不再是您的元素。

您需要在$.get之前将this保存为变量。

var that = this;
$.get(url, function(){
    $(that).closest('tr') // 'that' will be the correct element
});

【讨论】：

谢谢。你为什么建议我保存“this”而不是像其他人建议的那样保存 $(this)？这样做有优势吗？
@BrianFenton：我保存this 以防万一我需要在没有 jQuery 的情况下使用元素。
+1 感谢您的回复。因此，即使您只保存“this”，您仍然可以稍后访问 jQuery $(this)。很有趣。
@BrianFenton：是的，你可以稍后再做$(that)，或者如果你愿意，也可以做that.id。