jQuery ajax this.id 未定义答案

【问题标题】：jQuery ajax this.id undefinedjQuery ajax this.id 未定义
【发布时间】：2013-02-23 02:27:59
【问题描述】：

我有一个使用 AJAX 删除的项目列表。

这个列表是一个简单的列表，其中包含 div，每个 div 作为 id，所以当从数据库中删除项目时，我返回 true，然后删除该行。

这是我的代码：

HTML

<div id="row1">
<div>item1</div>
<div><a href="...">view</a></div>
<div><a id="1">delete</a></div>
</div>

JS

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }
    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + this.id).remove();
            }
        }
    });
});

由于某种原因，this.id 不起作用，因为 this.id 未定义......为什么？我的href上有id="1"。

【问题讨论】：

没有具有.delete 类的元素，如果有，您需要在点击处理程序中保存对this 的引用，并在成功处理程序中引用它。
$(this) inside of AJAX success not working 的可能重复项

标签： jquery ajax

【解决方案1】：

您使用的 this 指的是 ajax 对象，因为该函数中有一个新的范围。如果你想在你的范围之外访问变量，你必须在 ajax 调用之前声明它们。

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }
    var _this = this;
    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + _this.id).remove();
            }
        }
    });
});

【讨论】：

【解决方案2】：

您的 ID 不应以数字开头。以下是如何制定有效 id：What are valid values for the id attribute in HTML?

成功回调函数中的this 不引用点击处理函数中的this。所以你需要在你的点击处理程序中引用this，以便在你的回调函数中访问它：

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }
    var that = this;
    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + that.id).remove();
            }
        }
    });
});

【讨论】：

我对否决投票全心全意。只是想知道如何提高我的知识。

【解决方案3】：

$('.delete').click(function () {
    if (!confirm('Are you sure you want to delete?')) {
        return false;
    }

    var id = this.id; // here is the magic

    $.ajax({
        type: "POST",
        url: '/delete_record',
        data: 'id=' + this.id,
        cache: false,
        success: function (result) {
            if (result == 'good') {
                $('#row' + id).remove();
            }
        }
    });
});

【讨论】：

【解决方案4】：

尝试在$.ajax$this之前声明

喜欢：

var $this = this;

并使用变量。

$('.delete').click(function () {
   var $this = this;

  if (!confirm('Are you sure you want to delete?')) {
      return false;
  }

  $.ajax({
      type: "POST",
      url: '/delete_record',
      data: 'id=' + $this.id,
      cache: false,
      success: function (result) {
          if (result == 'good') {
              $('#row' + $yourid).remove();
          }
      }
 });
});

【讨论】：

好点，但您可能不需要将this 变量包装在jQuery 对象中，因为只需要ID。怎么样：var that = this;，因为你可以在 AJAX 回调函数中使用that.id。
当你得到一个元素的 id 时，它创建的开销要少得多 var $thisId = this.id 而不是将 this 包装在一个 jQuery 对象中。

【解决方案5】：

我在您的 html 中没有看到任何具有“删除”类的元素。假设它是删除链接，您需要使用$(this).attr('id') 而不是 this.id 获取 id。

【讨论】：

this.id 返回 id 而不会产生创建 jQuery 对象的额外开销。