jQuery parents（）选择器失败

Question

我有一个锚点，并向其附加了onClick回调，因此一旦单击它，就会触发一个AJAX请求，调用一个从数据库中删除图像的视图。它还应该完全删除<div class="image-preview">，但是由于某种原因，这种情况不会发生。你知道吗

当我在JSFiddle中测试div删除代码时，它是有效的。正在成功地从数据库中删除图像，并且删除过程中涉及到视图。我还尝试从成功回调中console.log，我可以看到一条调试消息。console.log($(this).parents('.image-preview'));返回Object { length: 0, prevObject: Object(1) }，因此我认为选择器失败了。你知道吗

原因是什么？你知道吗

HTML格式：

<div id="information">
  <div class="image-previews">
    <div class="image-preview">
      <img src="/media/tmp/None/IMG_20190507_144128.jpg" width="80" height="54">
      <p><a id="115" class="delete-temp-image-link">delete</a></p>
      <label><input type="radio" name="main" value="IMG_20190507_144128.jpg">main</label>
    </div>
  </div>
  <div id="div0">
    <div>Name: IMG_20190507_144128.jpg</div>
    <div>Size: 3.03MB</div>
    <div>Type: image/jpeg</div>
    <div class="progressNumber">100%</div>
  </div>
</div>

jQuery查询：

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');
      $(this).parents('.image-preview').remove();
    }
  });      
}        

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

查看：

def delete_view(request, id):
    img = get_object_or_404(TemporaryImage, id=id)
    img.delete()
    return HttpResponse('successfull')

Answer 1

请为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);

Answer 2

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

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

这应该像预期的那样起作用。你知道吗

Answer 3

$(this)对命名的click回调函数不可用。使代码更显式的一种方法是存储$(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()。从jQuery docs，.closest()执行以下操作：

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

查看docs页面，了解.closest()和.parents()之间差异的描述。主要区别在于.closest()只遍历DOM树直到找到匹配项，而不是遍历到根元素。我怀疑这会带来巨大的性能影响，但由于您只选择了一个<div>，所以它的代码要稍微精确一些。你知道吗