jquery-mobile - jQuery mobile：“swipeleft”和“swiperight”只工作一次

Question

我有一个页面，向左滑动会调出下一页（不同的 url），在下一页上，向右滑动会调出上一页。该代码第一次运行良好。但是，下一次就不行了！如果我手动刷新页面，它会再次开始工作......所以它一定是初始化问题。

我相信你们中的一些人一定在某个时候遇到过这个问题。对于那些有的人，我想问你 - 实现这样一个功能的正确方法是什么？

Answer 1

这是我最终使用的：

$(document).bind("pageinit", function(event) {
    var count = 1;
    var nextPage;
    var prevPage;

    //build 1st page of results
    nextPage = "page-"+count+".html";
    $("#showList").load(nextPage,function(){
        $('#showList').trigger('create');
    });

    //detect swipeleft
    $("#showList").bind("swipeleft",function(event) {
        //verify if there is next page
        if(count < 3) {
            // go to next page
            count++;
            nextPage = "page-"+count+".html";
            $("#showList").load(nextPage,function(){
                alert(nextPage+" loaded");
                $('#resultList').trigger('create');
            });
        } else {
            //else notify user he has reached end of results
            alert("Reached end of results");
        }
    });
    //detect swiperight
    $("#showList").bind("swiperight",function(event) {
        //verify it's not 1st page
        if(count > 1) {
            count--;
            prevPage = "page-"+count+".html";
            //go to previous results page
            $("#showList").load(prevPage,function(){
                alert(prevPage+" loaded");
                $('#showList').trigger('create');
            });
        } else {
            //else notify user he's on 1st page
            alert("You are on the 1st page");
        }
    });
});

它本质上使用 2 个滑动事件 - swipeleft 和 swiperight - 仅更新列表中出现单个项目的部分，即介于<ul id ="showList">和之间</ul>。滑动现在每次都有效。

部分解决方案来自这里：http: //blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/

这适合我的实现，但另一方面是 URL 在页面中保持不变。

我仍然对任何其他解决方案持开放态度。