jquery-mobile - jQuery モバイル:「左にスワイプ」と「右にスワイプ」は 1 回だけ機能します

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 と swiperright) を使用して、個々のアイテムが表示されるリストの部分、つまり と の間のみを更新し<ul id ="showList">ます</ul>。スワイプはいつでも機能します。

ソリューションの一部はここから派生しました: http://blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/

これは私の実装に適していますが、反対に、URL はページ全体で同じままです。

私はまだ他の解決策を受け入れています。