jQuery Mobile переключиться на "страницу", которая уже в dom С.changePage()

Сейчас у моего DOM есть три дива с data-roll="page", все они имеют уникальные идентификаторы. если я использую следующий код, он работает, но jQuery Mobile создает новый узел, а не переключается на уже существующий узел.

$('div.ui-page').live("swipeleft", function(){
    var nextpage = $(this).next('div[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
        console.log(nextpage);
        $.mobile.changePage(nextpage.attr('id'), {transition: 'slide'});
    }
});

Я также пытался передать только nextpage в метод .chagePage, но когда когда-либо страницы имеют набор идентификаторов, я получаю следующую ошибку.

TypeError: b.split is not a function

Поэтому я хочу переключиться непосредственно на уже существующую "страницу", которая находится в DOM, а не создавать новую из моего обработчик swipeleft.

Я использую jQuery 1.7.1 и jQuery Mobile 1.1.1

1   2  

1 ответ:

Вы пробовали передавать-в объект jQuery, а не строку?

$(document).delegate('.ui-page', "swipeleft", function(){
    var $nextPage = $(this).next('[data-role="page"]');
    // swipe using id of next page if exists
    if ($nextPage.length > 0) {
        $.mobile.changePage($nextPage, { transition: 'slide' });
    }
}).delegate('.ui-page', "swiperight", function(){
    var $prevPage = $(this).prev('[data-role="page"]');
    // swipe using id of next page if exists
    if ($prevPage .length > 0) {
        $.mobile.changePage($prevPage, { transition: 'slide', reverse : true });
    }
});​

Вот демо: http://jsfiddle.net/V3CXF/

В противном случае я думаю, что вы должны добавить хэш-метку к вашему идентификатору строки, чтобы сделать его допустимым селектором: 

$(document).delegate('.ui-page', "swipeleft", function(){
    var $nextPage = $(this).next('[data-role="page"]');
    // swipe using id of next page if exists
    if ($nextPage.length > 0) {
        $.mobile.changePage('#' + $nextPage[0].id, { transition: 'slide' });
    }
}).delegate('.ui-page', "swiperight", function(){
    var $prevPage = $(this).prev('[data-role="page"]');
    // swipe using id of next page if exists
    if ($prevPage .length > 0) {
        $.mobile.changePage('#' + $prevPage[0].id, { transition: 'slide', reverse : true });
    }
});​

Вот демо: http://jsfiddle.net/V3CXF/1/

Обратите внимание, что я заменил .live() на .delegate(), поскольку .live Теперь амортизируется (по состоянию на ядро jQuery 1.7). Если вы используете jQuery Core 1.7 или новее, вы можете использовать .on() вместо.

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

2