Сбой селектора родителей () jQuery

Question

У меня есть привязка, и я прикрепил к ней обратный вызов onClick, поэтому, когда он щелкает, запускается запрос AJAX, который вызывает представление, удаляющее изображение из базы данных. Он также должен также полностью удалить <div class="image-preview">, однако по какой-то причине этого не происходит.

Когда я тестировал код удаления div в JSFiddle , он работает. Изображение успешно удаляется из базы данных, и в этом процессе участвует 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) перед запуском $. 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);

Это должно работатькак и ожидалось.

Answer 2

$(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 , .closest() выполняет следующее:

Для каждого элемента в наборе получите первый элемент, который соответствует селектору, проверив сам элемент и пройдя вверхчерез его предков в дереве DOM.

Посетите страницу документации для описания различий между .closest() и .parents(). Основное отличие состоит в том, что .closest() проходит только по дереву DOM до тех пор, пока не найдет совпадение, а не до самого корневого элемента. Я сомневаюсь, что это сильно сказывается на производительности, но поскольку вы выбираете только один <div>, это немного более точный код.

Answer 3

Та же проблема возникает и со мной. На самом деле «$ (this)» сложно, как может показаться.

«$ (this)» нельзя использовать в функции успеха, так как он потерял область видимости в функции успеха. Попробуйте определить «$ (this)» за пределами успеха (т. Е. Перед ajax), например,

const element = $ (this)

А затем - в вашем успехеfunction:

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

Это определенно должно решить вашу проблему.

Надеюсьэто помогает!

Answer 4

Попробуйте этот код для 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);