Question

现在我的DOM有三个带有data-roll="page"的div，它们都有唯一的id。如果我使用以下代码它可以工作，但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方法，但是当页面设置了id时，我得到以下错误。

TypeError: b.split is not a function

所以我希望直接切换到DOM中现有的“页面”，而不是从我的swipeleft处理程序创建一个新页面。

我正在使用jQuery 1.7.1和jQuery Mobile 1.1.1

Answer 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/

否则我认为你必须在字符串ID前加一个哈希标记，使其成为有效的选择器：

$(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

jQuery Mobile切换到“页面”已经在dom中使用.changePage（）

1 个答案: