后退按钮在 jquery mobile 中不起作用答案

【问题标题】：back button is not working in jquery mobile后退按钮在 jquery mobile 中不起作用
【发布时间】：2012-07-24 05:55:07
【问题描述】：

嗨，我有两个 html 文件 index.html 和 test.html 在这两个文件中，当我从 index 转到 test 时，我添加了后退按钮为 data-rel="back"，然后当我单击后退按钮时在 test.html 上添加了它不是导航到 index.html 。我的索引文件如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
    <link rel="stylesheet" href="docsdemos-style-override.css" />
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>

</head> 
<body> 

    <div id="searchpage" data-role="page" data-theme="b" data-role="content" data-add-back-btn="true">

        <div data-role="header" align="center">

                <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
                <h1>index page</h1>
                <a href="MainMenu.html"  data-icon="grid">Menu</a>          

        </div>

        <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br" >
                     <input type="text" name="stock" id="enterstock" value="" />

                    <input type="submit" id = "verify" data-role="button">

        </div>

        <script type="text/javascript">

            $("#verify").click(function (e)
            {
                e.stopImmediatePropagation();
                e.preventDefault();
                window.location = "Test.html";
                 //$.mobile.changePage('Test.html')
            });


        </script>


    </div>

</body>
</html>

我的 test.html 是这样的：

<!DOCTYPE html>
 <html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
    <link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
    <link rel="stylesheet" href="docsdemos-style-override.css" />
    <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
    <!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
    <!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


</head> 


<body>

    <div id="cash" data-role="page" data-theme="a" data-role="content" data-add-back-btn="true">
        <div data-role="header" align="center">

            <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
            <h1>Test page</h1>
            <a href="MainMenu.html"  data-icon="grid">Menu</a>


        </div>

        <h1>Testing</h1>
    </div>

</body>

</html>

如果我使用$.mobile.changePage('Test.html')，则返回按钮可以正常工作，但使用window.location = "Test.html"; 则无法正常工作。为什么会这样？在 blackberry5 changePage 中不起作用，因此我无法使用它。任何建议将不胜感激。提前致谢

【问题讨论】：

标签： javascript jquery jquery-ui jquery-mobile cordova

【解决方案1】：

data-rel = "Back" 适用于基于单个 html 页面的导航堆栈构建。

将您的页面添加到同一个 html 文件中。它按需应用页面增强。即使两个页面在同一个 html 中，第二页也不会加载到 dom，直到您更改到该页面。

我想当你尝试使用两个 html 时，dom 不应该表现得那样。是不是。

将两个页面放在同一个 html 上。这就是他们建议您依赖内置导航系统的方式。

您的页面格式也不正确。先学好教程。

【讨论】：

感谢您的回复，实际上我有很多页面，所以我无法将它们添加到同一页面中。还有其他解决方案可以在不使用 ajax 的情况下导航到后面吗？

【解决方案2】：

如前所述，data-rel="back" 适用于单个 HTML 页面中的页面。

但是，您可以尝试使用 history.back() 函数。这应该模拟浏览器上的“后退”按钮，所以如果这是您正在寻找的行为，它应该可以工作。试一试！

【讨论】：

【解决方案3】：

在点击事件中使用以下代码

window.history.back();

【讨论】：