Javascript jQuery parents（）选择器失败

我有一个锚点，并向它附加了一个onClick回调，因此一旦单击它，就会触发一个AJAX请求，调用一个从数据库中删除图像的视图。它还应该完全删除

，但是由于某些原因，这种情况不会发生

当我在中测试div删除代码时，它是有效的。正在成功从数据库中删除图像，并且删除视图参与了该过程。我还尝试从成功回调内部

console.log

，我可以看到一条调试消息<代码>控制台.log（$（this.parents（'.image preview'））返回

对象{length:0，prevObject:Object（1）}

，因此我认为选择器失败了

原因可能是什么

HTML:

视图：

---

请为jQuery尝试此代码

var $deleteClicked = function(event) {
  var url = Urls.deleteTempImage($(this).attr('id'));

  $.ajax({
    url: url,
    data: {
      'id': $(this).attr('id')
    },
    success: function (data) {
      console.log('spam');
      $(this).parents('.image-preview').remove();
    }
  });      
}        

$('.delete-temp-image-link').on('click', $deleteClicked);

---

请为jQuery尝试此代码

var $deleteClicked = function(event) {
  var url = Urls.deleteTempImage($(this).attr('id'));

  $.ajax({
    url: url,
    data: {
      'id': $(this).attr('id')
    },
    success: function (data) {
      console.log('spam');
      $(this).parents('.image-preview').remove();
    }
  });      
}        

$('.delete-temp-image-link').on('click', $deleteClicked);

---

您必须在运行$之前存储$（this）。ajax，因为您在错误的上下文中使用它

var $deleteClicked = function(event) {
var url = Urls.deleteTempImage(event.target.id);
var storedThis = $(this);

    $.ajax({
        url: url,
        data: {
            'id': event.target.id
        },
        success: function (data) {
            console.log('spam');
            storedThis.parents('.image-preview').remove();
        }
    });      
}        

$(document).on('click', '.delete-temp-image-link', $deleteClicked);

---

这应该按预期工作。

您必须在运行$之前存储$（此）。ajax，因为您在错误的上下文中使用它

var $deleteClicked = function(event) {
var url = Urls.deleteTempImage(event.target.id);
var storedThis = $(this);

    $.ajax({
        url: url,
        data: {
            'id': event.target.id
        },
        success: function (data) {
            console.log('spam');
            storedThis.parents('.image-preview').remove();
        }
    });      
}        

$(document).on('click', '.delete-temp-image-link', $deleteClicked);

这应该可以正常工作。

$（此）

对命名的单击回调函数不可用。使代码更加明确的一种方法是存储

$（this）

，正如其他人所说的那样，或者，简单地使用您已经传递的

id

。例如：

var $deleteClicked = function(event) {
  var url = Urls.deleteTempImage(event.target.id);

  $.ajax({
    url: url,
    data: {
      'id': event.target.id
    },
    success: function (data) {
      console.log('spam');
      $("#"+event.target.id).closest('.image-preview').remove();
    }
  });      
}        

$(document).on('click', '.delete-temp-image-link', $deleteClicked);

另外，请注意，我使用jQuery

.closest（）

而不是

.parents（）

。从，

.closest（）

执行以下操作：

对于集合中的每个元素，获取与 通过测试元素本身并向上遍历其 DOM树中的祖先

查看文档页面，了解

.closest（）

和

.parents（）

之间差异的描述。主要区别在于，

.closest（）

只向上遍历DOM树，直到找到匹配项为止，而不是一直遍历到根元素。我怀疑这会对性能造成巨大影响，但由于您只选择了一个

，因此它的代码更精确。

$（此）

不适用于命名的单击回调函数。使代码更加明确的一种方法是存储

$（this）

，正如其他人所说的那样，或者，简单地使用您已经传递的

id

。例如：

var $deleteClicked = function(event) {
  var url = Urls.deleteTempImage(event.target.id);

  $.ajax({
    url: url,
    data: {
      'id': event.target.id
    },
    success: function (data) {
      console.log('spam');
      $("#"+event.target.id).closest('.image-preview').remove();
    }
  });      
}        

$(document).on('click', '.delete-temp-image-link', $deleteClicked);

另外，请注意，我使用jQuery

.closest（）

而不是

.parents（）

。从，

.closest（）

执行以下操作：

对于集合中的每个元素，获取与 通过测试元素本身并向上遍历其 DOM树中的祖先

---

查看文档页面，了解

.closest（）

和

.parents（）

之间差异的描述。主要区别在于，

.closest（）

只向上遍历DOM树，直到找到匹配项为止，而不是一直遍历到根元素。我怀疑这会对性能造成巨大影响，但由于您只选择了一个

，因此它的代码更精确。

同样的问题也会出现在我身上。 实际上，“$（这个）”看起来很棘手

“$（this）”无法在成功函数中使用，因为它在成功函数中失去了它的作用域。 尝试在成功之外（即在ajax之前）定义“$（this）”，例如

常量元素=$（此）

然后在你的成功函数中：

element.parents（'.image preview'）.remove（）

这肯定能解决你的问题

---

希望这有帮助

同样的问题也发生在我身上。 实际上，“$（这个）”看起来很棘手

“$（this）”无法在成功函数中使用，因为它在成功函数中失去了它的作用域。 尝试在成功之外（即在ajax之前）定义“$（this）”，例如

常量元素=$（此）

然后在你的成功函数中：

element.parents（'.image preview'）.remove（）

这肯定能解决你的问题

---

希望这有帮助

也许$（这个）用在了错误的上下文中？尝试将其存储在$之前。ajax@AndreasSchmidt你是对的。如果你愿意，你可以发布一个答案，我很乐意接受。也许$（这个）用在了错误的上下文中？尝试将其存储在$之前。ajax@AndreasSchmidt你是对的。如果你愿意，你可以发布一个答案，我很乐意接受。正如我在回答中所建议的。正如我在回答中所建议的。