Метод jQuery on () для нескольких селекторов

Question

Поскольку версия 1.7 live устарела.

Следующий пример легко сделать совместимым с новым on методом:

$('nav li, #sb-nav li, #help li').live('click', function () {
    // code...
});

Использование on:

$('nav, #sb-nav, #help').on('click', 'li', function () {
    // code...
});

Как переписать следующий пример, используя on?

 $('#header .fixed-feedback-bn, #sb-sec .feedback-bn').live('click', function () {
     // code...
 });

Answer 1

$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
     // code...
 });

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

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

Лучший способ использовать .on в качестве делегирующей функции - это определить ближайшего общего предка, который, как ожидается, никогда не будет уничтожен или иным образомсобытия не связаны.Например, если у вас есть форма, которая обновляется и изменяется с помощью запросов ajax, слушателем может быть сам узел формы (если обновляется только содержимое формы) или элемент контейнера (обычно div), который окружает форму.Если такого div нет, вы всегда можете добавить его или просто подняться по дереву к следующему предку.

[отредактировано, чтобы добавить:]

В конкретномПриведенный пример кода трудно сказать, есть ли лучший слушатель, который будет содержать как #header, так и #sb-sec.Но представив, что эти вещи имеют общего предка с идентификатором «mainContainer», ваш более эффективный код просто заменяет слушателя:

$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
   // code...
});

Answer 2

Если вы пытаетесь использовать .on(), чтобы вы могли прослушивать события в объекте DOM, которые могут быть созданы после того, как вы сделаете первоначальный вызов .on(), то наиболее эффективный способ сделать это - найти существующий родительский объект, который не будет приходить и уходить, и теперь вы можете привязать слушателей событий.

.live() помещает всех слушателей в объект документа (основной родитель) и может стать довольно неэффективным, если у вас много слушателей.

.on() позволяет указать, какой родительский объект будет наиболее эффективным. Итак, если вы хотите поместить все эти обработчики событий в один оператор, и у этих «#header .fixed-feedback-bn, # sb-sec .feedback-bn» нет общего родителя, вам придется указать документ, как тот родитель, как Грег написал.

Но более эффективный способ сделать это - разбить его на части в соответствии с потребностями. Для элементов, которые не имеют динамической необходимости, просто привязать непосредственно к этому элементу. Например, если #header и # sb-sec не приходят / уходят и не нуждаются в динамическом поведении, вы можете просто найти прямо к ним, например:

$('#header, #sb-sec').on('click', function() {
    // code here
});

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

$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
    // code here
});

Answer 3

Возможно, вы захотите взглянуть на документацию live (), переключение на on () задокументировано: http://api.jquery.com/live/