jQuery Mobile Переключиться на страницу, которая уже находится в dom, с помощью .changePage()

Прямо сейчас в моем DOM есть три элемента div с 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'});
    }
});

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

TypeError: b.split is not a function

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

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


jquery dom swipe jquery-mobile
person hcker2000    schedule 06.08.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы пытались передать объект 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 Core 1.7). Если вы используете jQuery Core 1.7 или новее, вместо этого вы можете использовать .on().

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

person Jasper    schedule 06.08.2012
comment
Я попытался передать ему объект и попробовал ваше предложение добавить к идентификатору префикс #. Оба приводят к этой ошибке в firebug. TypeError: b.split не является функцией - person hcker2000; 06.08.2012
comment
@hcker2000 hcker2000 Я добавил демонстрации, чтобы показать, как работает мой код. См. здесь: jsfiddle.net/V3CXF - person Jasper; 06.08.2012
comment
Спасибо, я не уверен, ошибка это или нет, но по какой-то причине, если вы используете номер в качестве идентификатора, он не работает. В идентификаторе должен быть какой-то текст, чтобы он работал правильно. Я также немного переработал скрипт js, чтобы он работал с методом .on версии 1.7+, и он будет работать с объектом jquery, а не с идентификатором. jsfiddle.net/qGJpt/7 - person hcker2000; 06.08.2012
comment
@hcker2000 hcker2000 Это потому, что начинать идентификатор с цифры недопустимо. Вот отличный ответ на S.O. вопрос относительно действительных идентификаторов: stackoverflow.com/questions/70579/ - person Jasper; 06.08.2012
comment
Я помню, как читал эту спецификацию некоторое время назад. Думаю, обычно я просто никогда не пытаюсь делать то, что сделал сегодня. Я очень ценю всю помощь. - person hcker2000; 06.08.2012