2

我在使用 jQuery 移动应用程序后退按钮时遇到问题。这个论点已经讨论了很多，但我仍然必须找到正确的答案。

我有 2 个 html 文件：我们称它们为 list.html 和 description.html

它们中的每一个都包含一个 data-role="page"。

现在，从列表中我将使用

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

在描述中，我有几个链接用于填充列表。因此，当单击我使用的链接时

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

然后从列表中我可以再次进入描述，依此类推。

现在的问题是，如果我只打开 1 个时间列表和描述，那么一切都是完美的。后退按钮正常工作。但是当我打开另一个列表时，它不会将它添加到正文内的 div 中，而是替换旧的。这样，当我在第一个列表中单击返回时，我会看到第二个调用的结果。

我试过了

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 回答