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

У меня был код вроде этого:

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

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

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

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

Любые идеи?

Update

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

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

Это не работает, когда я делаю так.

Ответы

Ответ 1

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

$('#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 имеет определенное использование, которое явно не указано в документации.

Вы можете использовать .on() непосредственно на селекторе:
```
$('button').on('click', function () { $(this).css('border', 'solid 1px red'); });
```
Он будет работать, но он будет НЕ применяться к любым будущим элементам, динамически добавленным на страницу с тем же селектором. Это отличается от способа работы .live(). Вы должны привязываться к объекту документа, чтобы улавливать будущие элементы, а также текущие. Это потому, что селектор теперь является элементом, который вы слушаете, и он поймает все события кликов, которые пузырятся до этого элемента (документ является одним из самых верхних элементов для прослушивания). Затем вы передаете селектор для интересующего вас элемента в качестве второго аргумента после имени события.
```
$(document).on('click', 'button', function () { $(this).css('border', 'solid 1px red'); });
```
Теперь слушатель отфильтровывает события кликов, пока не найдет тот, который был первоначально запущен на 'button' и вздулся до документа.
Вы должны указать селектор строк, а не завернутый набор. Это не сработает:
```
var $buttons = $('button');
$(document).on('click', $button, function () { $(this).css('border', 'solid 1px red'); });
```

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

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

Ответ 2

Чтобы получить "исходный элемент для события", вы должны использовать свойство 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 до запуска события.

Ответ 3

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

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

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