JQuery.on() с несколькими селекторами при делегировании событий?

Я использую .on() в jQuery 1.7 и задаюсь вопросом, можно ли одновременно добавлять несколько селекторов для элементов, которые были введены на страницу. Раньше я использовал live() - но очевидно, почему я хочу переместить данные улучшения производительности.

Можете ли вы использовать .on() следующим образом:

$(document).on('click', '#selector1, #selector2, .class1', function () { 
     //stuff
});

И есть ли какие-либо выгоды, потерянные при прикреплении к документу?

Ответ 1

Можете ли вы использовать .on() следующим образом:
```
$(document).on('click', '#selector1, #selector2, .class1', function () { 
    //stuff
});
```
Да, это сработает.
Я хочу использовать это вместо live() для повышения производительности.

Преимущества нет использования этого фрагмента кода в отличие от использования live(), поскольку live() сам связывает события с документом, а в jQuery 1.7 - прямые вызовы on позади сцены.
И есть ли какие-либо выгоды, потерянные при прикреплении к документу?

Недостатком привязки к document является то, что событие должно пройти весь список предков до его обработки; это как указано в документации jQuery, является самым медленным маршрутом. Лучше обработать событие раньше, добавив обработчик к элементу, ближе к источнику события.

Ответ 2

Я думаю, что важно прочитать источник jQuery для live, чтобы узнать, что происходит:

live: function( types, data, fn ) {
  jQuery( this.context ).on( types, this.selector, data, fn );
  return this;
}

Обратите внимание на вызов on там? live просто превратился в псевдоним для специального случая для on.

Причиной использования live вместо on является цепочки селекторов:

$('#foo').live('click', callback).doSomethingElse()

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

Ответ 3

это возможно, а "this" - это щелчок, а не документ.

вам лучше подключиться к ближайшему родительскому элементу вашего селектора. Когда вы нажимаете "# selector1", событие переходит к элементу обработчика события, здесь: document.

Чем больше слоев, тем больше действий. Более того, если между selector1 и документом есть еще один обработчик события клика, его можно перехватить с помощью event.stopPropagation(); и никогда не доходить до обработчика события "document".

вы можете проверить "перехват" изгоев " в этой скрипте.