jquery mobile 圆形导航返回按钮答案

【问题标题】：jquery mobile circular navigation back buttonjquery mobile 圆形导航返回按钮
【发布时间】：2012-10-24 08:46:22
【问题描述】：

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

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

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

现在，我将在列表中使用

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

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

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

然后我可以从列表中再次转到描述等等。

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

我试过了

window.location = 'list.html'

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

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

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

编辑：

我忘了提到我曾尝试使用类来识别页面（包括页眉、内容和页脚），但并没有解决问题。

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案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>

注意：不要忘记准备后退按钮！

新代码：

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

【讨论】：

对不起，但这并不能解决历史问题：当我创建新描述时，它将覆盖旧描述。
您将在哪里创建新的描述？这取决于您单击的链接？你用 $('yourdiv').append('newhtml');?
不我需要清除之前的div：$('#mydiv').html(content);
问题是当我在访问新描述后使用后退按钮时，我失去了第一个。准备后退按钮是什么意思？对不起，但我不明白。顺便谢谢你的回复。
但是你想保存以前的 html 并放入新的 html 吗？如果是真的，你需要使用$('yourdiv').append('newhtml');，否则我认为这是不可能的。忘记后退按钮。