2

现在我的 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'});
    }
});

我也尝试将 nextpage 传递给该.chagePage方法，但是当页面设置了 id 时，我会收到以下错误。

TypeError: b.split is not a function

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

我正在使用 jQuery 1.7.1 和 jQuery Mobile 1.1.1

4

1 回答 1

2

您是否尝试过传入 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()了现在已贬值的（从 jQuery Core 1.7 开始）.delegate()。.live如果您使用的是 jQuery Core 1.7 或更新版本，则可以.on()改用。

文档.live()：http ://api.jquery.com/live

于 2012-08-06T16:43:30.753 回答