Как повесить live событие через on?

Question

[Александр]

Здравствуйте. У меня есть свой старый плагин jquery. Хочу переписать его по jquery 2
Код
$group = $('.group');
$group.find('a').live('click', function(){...
Обработчик отлично срабатывал даже при появлении новых элементов .group. Обновил jquery переписал на $group.on('click', 'a', function(){.... Теперь событие для новых элементов не срабатывает. Я так понимаю теперь live через on работает при обнавлении в рамках элемента $group, а не всего элемента document. Как мне теперь повесить событие ? Только так $(document).on('click', '.group a', function()...
Вешать таким образом не очень удобно ведь событий у меня таких несколько для элементов с .group. А класс может поменяться или быть другим. Тогда могу сохранить в переменную и в итоге $(document).on('click', rootClass +' a', function()... Как вы думаете на сколько правильное решение? Или я чего то не понимаю. Спасибо

Answer 1

[GreatRash]

Ну всё правильно, $(document).on('click', '.group a', function() - это по сути делегирование, если класс у .group может меняться, то логично загнать его в переменную.

Опять же можно забить на .group, но добавить аттрибут к a, например вот так:

$(document).on('click', 'a[data-group="some_group"]', function(e) {
  // ...
});

Ещё можно вот так сделать:

$('.' + rootClass).on('click', 'a', function(e) {
  // ...
});

это если не хочется на весь документ событие вешать.

Comments

[Александр]

Спасибо, мне нужно именно эквивалентность live, который как я понял всегда вешает на document. Для новых элементов на странице мне подойтет$(document).on('click', '.'+rootClass +' a', function().

[GreatRash]

Александр: live - это тоже реализация паттерна "делегирование", на документ вешать нужно только в том случае когда вы не знаете в каком блоке может появиться новый элемент. а если вы точно уверены, что новые ссылки будут появляться только в .group, то нет смысла вешать обработчик целиком на документ.

[Александр]

Добавить атрибут не вариант. Возможно будет медленнее работать, но главное у меня плагин с разными событиями. И мне легче отталкивается от корневого класса

Answer 2

[Денис Инешин]

Вы говорите о делегировании событий. В современном jQuery, всё это умеет делать .on

Событие на элемент:
$('.elem').on('click', function () {...});

Делегирование:

$(document).on('click', '.elem', function () {...});

Comments

[Александр]

Да, меня интересовало как переписать с live на on правильно для использования в своем плагине, ведь как я понимаю live срабатывал всегда при обновлении элементов на странице.

[Денис Инешин]

Александр: вариант делегирование - вот так сейчас писать правильно, чтобы заменить Live