javascript - jQueryparents() 选择器失败

Question

我有一个 anchor ，并且已经附加了一个 onClick 回调，因此一旦单击它，就会触发一个 AJAX 请求，该请求会调用一个从数据库中删除图像的 View 。它还应该删除 <div class="image-preview">完全一样，但是由于某种原因这并没有发生。

当我在JSFiddle中测试div删除代码时， 有用。图像已成功从数据库中删除，并且该过程涉及delete_view。我也尝试过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

$(this)不适用于您的命名点击回调函数。使代码更明确的一种方法是存储 $(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.

查看文档页面，了解 .closest() 之间差异的描述。和.parents() 。主要区别在于.closest()仅向上遍历 DOM 树直到找到匹配项，而不是一直遍历到根元素。我怀疑这会对性能产生巨大影响，但由于您只选择一个 <div> ，这是稍微更精确的代码。