时间戳

首页 > 解决方案 > jQuery parents() 选择器失败

javascript - jQuery parents() 选择器失败

问题描述

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

当我在JSFiddle测试 div 删除代码时，它可以工作。图像已成功从数据库中删除，并且 delete_view 参与了该过程。我也尝试console.log从成功回调内部，我可以看到一条调试消息。console.log($(this).parents('.image-preview'));return 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')

标签： javascriptpythonjquerydjango

解决方案

您必须在运行$.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);

这应该按预期工作。

推荐阅读