jQuery Mobile切换到“页面”，即已与dom .changePage（）

Question

现在我的DOM有三个div与data-roll="page"，他们都有唯一的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'}); 
    } 
}); 

我也试图通过刚刚下一页到.chagePage方法，但是当过的网页有一个id集我碰到下面的错误。

TypeError: b.split is not a function 

所以我希望直接切换到DOM中已经存在的“页”，多数民众赞成，而不是创建从我swipeleft处理一个新的。

我使用jQuery 1.7.1和jQuery移动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