Используя функцию .on в jQuery, как получить исходный элемент для события?

javascript html events jquery

8763 просмотра

3 ответа

У меня был такой код:

$('.remove-group').click(function () {
    $(this).closest('tr').remove();
});

Это работало нормально, пока мне не понадобилось использовать делегированный обработчик событий для захвата кликов по элементам, которые будут добавлены на страницу в будущем.

$(document).on('click', '.remove-group', function () {
    $(this).closest('tr').remove();
});

Это больше не работает, потому что thisключевое слово не ссылается на исходный элемент.

Есть идеи?

Обновить

Казалось бы, в моих попытках упростить код для моего вопроса я фактически заставил его работать. Я фактически передавал упакованный набор, который был назначен переменной, а не селектору строк.

var $removeGroup = $('.remove-group');
$(document).on('click', $removeGroup, function () {
    $(this).closest('tr').remove();
});

Кажется, это не работает, когда я так делаю.

Автор: Chev Источник Размещён: 12.11.2019 09:14

Ответы (3)


26 плюса

Решение

Надеюсь, это поможет кому-то:

$('#container').on('click', '.remove-group', function(event) {
  $(this);          // returns $('.remove-group') equivalent
  $(event.target);  // returns $('.remove-group') equivalent

  $(event.delegateTarget);  // returns $('#container') equivalent
});

Ссылка: http://api.jquery.com/event.delegateTarget/

Редактировать от автора вопроса:

Я просто хочу уточнить некоторые ошибки, которые я изначально совершил.

Казалось бы, .on()обработчик в jQuery имеет какое-то конкретное использование, которое четко не указано в документации.

  1. Вы можете использовать .on()непосредственно на самом селекторе:

    $('button').on('click', function () { $(this).css('border', 'solid 1px red'); });
    

    Она будет работать, но это НЕ распространяется на любые будущие элементы динамически добавляемых на страницу с тем же селектором. Это отличается от способа .live()работы. Вы должны привязать к объекту документа, чтобы поймать будущие элементы, а также текущие. Это потому, что селектор теперь является элементом, который вы слушаете, и он будет перехватывать все события щелчка, которые всплывают до этого элемента (документ является одним из самых верхних элементов для прослушивания). Затем вы передаете селектор для интересующего вас элемента в качестве второго аргумента после имени события.

    $(document).on('click', 'button', function () { $(this).css('border', 'solid 1px red'); });
    

    Теперь слушатель будет отфильтровывать события щелчка, пока не найдет событие, которое изначально было запущено по кнопке и всплыло до документа.

  2. Вы должны предоставить селектор строки, а не упакованный набор. Это не будет работать:

    var $buttons = $('button');
    $(document).on('click', $button, function () { $(this).css('border', 'solid 1px red'); });
    

Для примера, смотрите этот jsbin .

По сути, вы просто должны слушать более высокую область, чем динамический элемент. Это имеет смысл, учитывая, что динамические элементы, которые вы хотите прослушивать, по определению добавляются / удаляются после того, как ваш код запускается и регистрирует прослушиватель событий.

Автор: Eugene Song Размещён: 24.11.2013 07:06

10 плюса

Чтобы получить « исходный элемент для события », вы должны использовать targetсвойство объекта события:

$(document).on('click', '.remove-group', function (e) {
    $(e.target).closest('tr').remove();
});

Однако такой подход, вероятно, не тот, который вам действительно нужен, поскольку исходный элемент может фактически быть потомком, .remove-groupчье событие click просто запутало целевой элемент - это означает, что вы можете удалить неправильную строку в случае вложенной таблицы. В контексте .on()обработчика, thisфактически ссылается на элемент, которому соответствует .remove-group. Для привязки к делегированному событию в этом элементе используется следующий .on()синтаксис:

$(static-parent-element).on(event, selector-string, handler)

Например, это правильный синтаксис:

$(document).on('click', '.remove-group', function () {
    $(this).closest('tr').remove();
});

Это будет соответствовать текущим и будущим .remove-groupэлементам, и удалит ближайшего trпредка. Вы можете ( и должны ) заменить documentздесь ближайшим родительским элементом, .remove-groupкоторый существует в DOM во время привязки и будет существовать всякий раз, когда ожидается, что это событие будет инициировано (т.е. является статическим). Это минимизирует расстояние, на которое событие должно всплыть в DOM-дереве, прежде чем событие будет запущено.

Автор: nbrooks Размещён: 15.09.2012 10:04

1 плюс

$(this)должно работать нормально, но попробуйте event.targetв любом случае.

$(document).on('click', '.remove-group', function (event) {
    $(event.target).closest('tr').remove();
});

Демо: http://jsbin.com/inewoc/1/edit

Автор: elclanrs Размещён: 15.09.2012 10:05
Вопросы из категории :
32x32