jQuery parents() 選擇器失敗

Question

我有一個錨點，並且我已經附加了一個 onClick 回調給它，所以一旦它被點擊，就會觸發一個 AJAX 請求，該請求調用一個從數據庫中刪除圖像的視圖。 它也應該完全刪除<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

您必須在運行$.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 2

$(this)不適用於您的命名點擊回調 function。 使您的代碼更明確的一種方法是存儲$(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 文檔中， .closest()執行以下操作：

對於集合中的每個元素，通過測試元素本身並向上遍歷其在 DOM 樹中的祖先來獲取與選擇器匹配的第一個元素。

查看文檔頁面，了解.closest()和.parents()之間的區別。 主要區別在於.closest()僅向上遍歷 DOM 樹直到找到匹配項，而不是一直遍歷到根元素。 我懷疑這會對性能產生巨大影響，但由於您只選擇了一個<div> ，因此它的代碼更精確一些。

Answer 3

試試這個 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 4

我也遇到同樣的問題。 實際上，'$(this)' 看起來很棘手。

'$(this)' 不能成功使用 function，因為它丟失了 scope 成功 function。 嘗試在成功之外定義'$（this）'（即在ajax之前），例如

常量元素 = $(這個)

然后在您的成功 function 中：

element.parents('.image-preview').remove();

這絕對可以解決您的問題。

希望這可以幫助！