jquery-mobile - jQuery 手机 : "swipeleft" and "swiperight" work only once

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 在整个页面中保持不变。

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