JQuery Мобильный делегат vs live vs bind

Кажется, я не могу окунуться в разницу между следующим в jQuery Mobile:

$( document ).live('pageshow', function(event) {
});

$( document ).bind('pageshow', function(event) {
});

$( document ).delegate("#page", "pageshow", function() {
});

Как выполнить скрипты в главах моих документов, которые РАЗЛИЧНЫ на некоторых страницах? Какие методы я использую для вызова этих сценариев?

Обновление: Версия jQuery: 1.7.1 jQuery Мобильная версия: 1.1.0

Ответы

Ответ 1

Вы привязываетесь к "событию страницы", которое предоставляет jQuery Mobile, например pageinit:

$(document).delegate('#my-page', 'pageinit', function () {
    //this is like document.ready for this pseudo-page
});

Поскольку вы используете jQuery Core 1.7.1, вы можете использовать .on(), который имеет несколько иной синтаксис:

$(document).on('pageinit', '#my-page', function () {
    //this is like document.ready for this pseudo-page
});

Все три ваших метода выполняют аналогичные действия. .live() - это то же самое, что использовать .delegate() с document как выбор корня, но он обесценился, поэтому рекомендуется прекратить его использовать (источник: http://api.jquery.com/on). Использование .bind() непосредственно в элементе document такое же, как при использовании .delegate(), но когда вы используете .bind(), вам нужно определить, какая псевдостраница имела событие, запущенное на нем в обработчике событий, а не в вызове функции.

Например:

$(document).bind('pageshow', function () {
    var id = $.mobile.activePage[0].id;
    //you can use $.mobile.activePage to do work on the current page
});

В общем случае делегирование событий используется, когда мы не знаем, когда элемент будет существовать в DOM. Он полагается на события, пузырящие DOM до тех пор, пока они не получат выбор корня (в вашем случае это всегда элемент document).

Документы для .delegate(): http://api.jquery.com/delegate

Более подробную информацию о различии между этими функциями см. в этой статье (я прочитал ее, чтобы проверить ее на правильность и правильность): http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html