Question

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

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

每个都包含一个data-role =“page”。

现在，从列表中我将使用

进入描述

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

在描述中，我有几个用于填充列表的链接。所以当点击我使用的链接时

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

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

现在的问题是，如果我只打开一个时间列表和说明，一切都很完美。后退按钮正常工作。但是当我打开另一个列表时，它不会将它添加到正文中的div，而是替换旧的。这样，当我点击第一个列表时，我会看到第二个电话的结果。

我试过

window.location = 'list.html'

但它会带来更多问题。而且速度较慢。

我希望我已经清楚地解释了我的问题。我不知道这听起来是否令人困惑。

希望有人能够提供帮助。感谢。

修改

我忘了提到我已经尝试使用类来识别页面（带有标题，内容和页脚），但它没有解决问题。

Answer 1

您将使用以下内容解决您的问题：

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

jquery移动圆形导航后退按钮

1 个答案: