Question

我想删除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;
    });
  });

Answer 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;
}

Answer 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;
    });
});

Answer 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;
    });
  });

Answer 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;
    });
  });

Answer 5

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

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

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

在Jquery中将$ .get与$（this）相结合.remove（）打破$（this）

5 个答案: