2

jQuery モバイル アプリの戻るボタンに問題があります。この議論は何度も議論されてきましたが、私はまだ正しい答えを見つけなければなりません。

私は2つのhtmlファイルを持っています.list.htmlとdescription.htmlとしましょう。

それぞれに単一の data-role="page" が含まれます。

さて、リストから私は説明に行きます

$.mobile.changePage('description.html')

説明には、リストに入力するために使用するリンクがいくつかあります。だから私が使用するリンクをクリックするとき

$.mobile.changePage('list.html')

次に、リストから再び説明に移動できます。

ここでの問題は、タイム リストと説明を 1 つだけ開くと、すべてが完璧になることです。戻るボタンは正常に機能します。しかし、別のリストを開くと、ボディ内の div に追加されず、古いリストが置き換えられます。そうすれば、最初のリストをクリックして戻ると、2 番目の呼び出しの結果が表示されます。

私は試してみました

window.location = 'list.html'

しかし、それはさらに多くの問題を引き起こします。そして、それはより遅いです。

私の問題を十分に明確に説明できたことを願っています。これが紛らわしいかどうかはわかりません。

誰かが助けてくれることを願っています。ありがとう。

編集：

クラスを使用してページを（ヘッダー、コンテンツ、フッターで）識別しようとしたことを忘れていましたが、問題は解決しませんでした。

4

1 に答える 1

0

次のようなものを使用して問題を解決します。

    <script>
        $('#pageDescription').click(function(){
            $('yourdiv').html(content);
            $.mobile.changePage('#pageList','slide');
        });
        $('#pageList').click(function(){
            $('yourdiv').html(content);
            $.mobile.changePage('#pageDescription','slide');
        });
    </script>
    <body>
        <div data-role="page" id="pageDescription">
            //Your html from description.html
        </div>
        <div data-role="page" id="pageList">
            //Your html from list.html
        </div>
    </body>

詳細情報を参照してください: http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html

注意：戻るボタンの準備をお忘れなく！

新しいコード:

<script>
    var oldHtml;
    $('div li a').click(function(){
        oldHtml = $('yourdiv').html();
        $('yourdiv').html(content);
        $.mobile.changePage('#pageDescription','slide');
    });
    $('a[data-icon=back]').click(function(){
        $('yourdiv').html(oldHtml);
    });
</script>
<body>
    <div data-role="page" id="pageDescription">
        //Your html from description.html
    </div>
    <div data-role="page" id="pageList">
        <div data-role="header">
            <a data-role="button" data-icon="back" data-iconpos="notext"></a>
        </div>
        //Your html from list.html like this
        <ul>
            <li><a>link1</a></li>
            <li><a>link2</a></li>
        </ul>
    </div>
</body>
于 2012-12-03T14:27:51.047 に答える