Как прикрепить событие к мобильной странице jQuery, используя on () и off ()? - PullRequest
Новая
       41

Как прикрепить событие к мобильной странице jQuery, используя on () и off ()?

2 голосов
/ 26 февраля 2012

Я пытаюсь обновить до продолжительного Jquery 1.7.1 (используя JQM 1.1pre).

Раньше я мог связываться со страницей JQM следующим образом: 

$('#mypage').live('pageshow', function() { /* do stuff */ })

Для Jquery 1.7.1 теперь это должно быть: 

$('#mypage').on('pageshow', function() { /* do stuff */ })

Или, если страница вставлена ​​динамически 

$('body').on('pageshow', '#mypage', function() { /* do stuff */ })

Вопросы:
Правильный синтаксис для jquery 1.7 +?
- Я не могу получить события для запуска в JQM, используя это. Я пытался $('div:jqmData(role="page")#mypage, но это также не похоже на работу. Какой будет правильный синтаксис для добавления некоторых функций только к определенной странице JQM?

Спасибо за помощь!

EDIT:
Через некоторое вмешательство кажется, что вы можете звонить только on() и off() на $('div:jqmData(role="page")'). Вызов соответствующего # pageID не работает. При таком многостраничном макете привязка срабатывает один раз на страницу, поэтому, если у вас есть 10 страниц в многостраничном документе, это: 

$('div:jqmData(role="page")').on('pageshow', function() {
   // do stuff
   });

будет срабатывать 10 раз или один раз за страницу в многостраничном документе.

Полагаю, JQM обратит на это внимание до выпуска 1.1. А пока я использую это как своего рода обходной путь, чтобы убедиться, что материал прикреплен только один раз. 

$('div:jqmData(role="page")').on('pageshow', function() {
   console.log("one");

   if ( $('.element').length > 0 && $('.element').jqmData('bound') != true) {       
     $('.element').jqmData('bound',true);
     $('.element').on('click', function() { /* button click handler */ });  
     }
   });

Я проверяю длину, поэтому код запускается только в том случае, если .element находится на соответствующей странице и не было ли оно уже привязано. Вы также можете использовать это для off() .element на странице выше. Только не забудьте сбросить jqmData('bound'), так что на следующих страницах его можно будет снова связать.

1 Ответ

3 голосов
/ 08 марта 2012

Вы должны иметь возможность использовать $ .on () для привязки ко всем страницам, а также к определенным страницам. Я создал образец здесь http://jsfiddle.net/kiliman/aAanV/

Я добавил обработчик pageinit / pageshow для ВСЕХ страниц (чтобы показать, что pageinit запускается один раз на страницу, а pagehow запускается каждый раз, когда отображается страница). Затем я создаю обработчик pageinit для # page1, чтобы связать обработчик события нажатия кнопки.

Обратите внимание на синтаксис. $ ( elements ). On (' events ', ' селектор ', обработчик ) против $ ( elements ). On (' events ', handler );

Если вы включите селектор , то вы делегируете обработчик всем элементам, которые соответствуют селектору. Если вы НЕ включаете селектор, то вы обязательный обработчик непосредственно к элементам . 

$(function() {
    // setup init/show handler for ALL pages
    var selector = ':jqmData(role=page)';
    $('body')
        .on('pageinit', selector, function(e, data) {
            // initialize page
            var $page = $(this);
            alert('init ' + $page.attr('id'));
        })
        .on('pageshow', selector, function(e, data) {
            // showpage
            var $page = $(this);
            alert('show ' + $page.attr('id'));
        });
    // setup init handler for page1
    $('#page1').on('pageinit', function(e, data) {
        // setup handler
        var $page = $(this);
        $page.find('.colorchanger').click(function() {
            var $content = $page.find('.ui-content'),
                isBodyC = $content.hasClass('ui-body-c');
            $content
                .toggleClass('ui-body-c', !isBodyC)
                .toggleClass('ui-body-e', isBodyC);
        });

    });
});
...