Так как версия 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...
});
$(document).on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code...
});
.live() является просто обязательным документом в качестве слушателя.
Мои два цента - это то, что вы почти всегда можете найти лучшего слушателя, чем document. На минимальном уровне почти все страницы используют основную оболочку содержимого. Это устраняет узлы в заголовке, нижнем колонтитуле и иногда боковых панелях в качестве слушателей.
Лучшим способом использования .on в качестве функции делегирования является идентификация ближайшего общего предка, который, как ожидается, никогда не будет уничтожен или иначе будет отключен. Например, если у вас есть форма, которая обновляется и изменяется с помощью запросов ajax, слушателем может быть сама форма node (если обновляется только содержимое формы) или элемент контейнера (обычно это div), который окружает форма. Если такого div нет, вы всегда можете добавить его, или вы можете просто подойти к дереву следующему предку.
[отредактировано для добавления:]
В приведенном конкретном примере кода трудно сказать, есть ли лучший слушатель, который будет содержать как #header, так и #sb-sec. Но, воображая, что эти вещи делятся с предком с идентификатором "mainContainer", ваш более эффективный код просто заменяет слушателя:
$('#mainContainer').on('click', '#header .fixed-feedback-bn, #sb-sec .feedback-bn', function () {
// code...
});
Если вы пытаетесь использовать .on(), чтобы вы могли прослушивать события на объекте DOM, которые могут быть созданы после выполнения начального вызова .on(), тогда наиболее эффективным способом это будет поиск существующего родительский объект, который не придет и не уйдет, и теперь вы можете связать прослушиватели событий.
.live() помещает всех слушателей в объект документа (главный родитель) и может стать довольно неэффективным, если у вас много слушателей.
.on() позволяет вам указать, какой именно этот родительский объект будет наиболее эффективным. Итак, если вы хотите поместить все эти обработчики событий в один оператор, и эти "#header.fixed-feedback-bn, # sb-sec.feedback-bn" не имеют общего родителя, тогда вам нужно будет указать как этот родитель, как писал Грег.
Но более эффективным способом сделать это было бы разбить это в зависимости от необходимости. Для элементов, которые не требуют динамической необходимости, просто привяжите их непосредственно к этому элементу. Например, если #header и # sb-sec не поступают/не идут и не требуют динамического поведения, вы можете просто найти его прямо следующим образом:
$('#header, #sb-sec').on('click', function() {
// code here
});
И для элементов, для которых вам нужно какое-то динамическое поведение, выберите подходящий общий родительский элемент и привяжите его так, как это, используя общий родительский элемент в качестве точки catch для событий, а селектор - как фильтр, для которого необходимы подэлементы событие для запуска:
$('#feedback').on('click', '.feedback-bn, .fixed-feedback-bn', function() {
// code here
});
Возможно, вам стоит взглянуть на документацию live(), задокументирован переключатель on(): http://api.jquery.com/live/