5

大家好，我正在从 index.html 导航到 test.html，因为$.mobile.changePage("test.html", {transition : "slide"}); 它工作正常。但是在我的 test.html 中，不同的 div 中有多个 html 页面。在 test.html 中，我调用了不同的 html 页面，该页面位于同一 html 文件（ietest.html）中的不同 div 中，$.mobile.changePage("#secondtestPage", {transition : "slide"}); 但这里它不是导航到 secondtestPage。我的 index.html 是：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile: Demos and Documentation</title>

    <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 data-role="page" id="firstPage" onclick=callSecondPage() class="type-home" data-ajax="false" >

            <div data-role="button">
                <input type="submit" data-role="button" value="firstPage" id="firstPage">
            </div>



    </div>  


    <script type="text/javascript">
                function callSecondPage()
                {
                    alert ("Ins ide callPage");

                    //$.mobile.changePage('#secondPage');
                    $.mobile.changePage("test.html", {transition : "slide"});


                }
            </script>

</body>
</html>

现在页面导航到 test.html，我的 test.html 看起来像：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Mobile: Demos and Documentation</title>

        <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 data-role="page" id="firsttestPage" onclick=callnewSecondPage() class="type-home" data-ajax="false" >

                <div data-role="button">
                    <input type="submit" data-role="button" value="firsttestPage" id="firsttestPage">
                </div>

                <script type="text/javascript">
                    function callnewSecondPage()
                    {
                        alert ("Inside callPage");

                        //$.mobile.changePage('#secondPage');
                        $.mobile.changePage("#secondtestPage", {transition : "slide"});
                        //$.mobile.changePage("index.html", {transition : "slide"});


                    }
                </script>

        </div>

        <div data-role="page" id="secondtestPage"  onclick=callThirdPage() class="type-home" data-ajax="false" >

                <div data-role="button">
                    <input type="submit" data-role="button" value="secondtestPage" id="secondtestPage">
                </div>

                <script type="text/javascript">
                    function callThirdPage()
                    {
                        alert ("Inside callPage");

                        $.mobile.changePage('#thirdtestPage');

                    }
                </script>

        </div>

        <div data-role="page" id="thirdtestPage"  onclick=callFourthPage() class="type-home">

                <div data-role="button">
                    <input type="submit" data-role="button" value="thirdtestPage" id="thirdtestPage">
                </div>

                <script type="text/javascript">
                    function callFourthPage()
                    {
                        alert ("Inside callPage");

                        $.mobile.changePage('#fourthtestPage');

                    }
                </script>

        </div>

        <div data-role="page" id="fourthtestPage" class="type-home">

                <div data-role="button">
                    <input type="submit" data-role="button" value="fourthtestPage" id="fourthtestPage">
                </div>

        </div>

        <div data-role="page" id="fifthtestPage" class="type-home">

                <div data-role="button">
                    <input type="submit" data-role="button" value="fifthtestPage" id="fifthtestPage">
                </div>

        </div>

        <div data-role="page" id="sixthtestPage" class="type-home">

                <div data-role="button">
                    <input type="submit" data-role="button" value="sixthtestPage" id="sixthtestPage">
                </div>

        </div>
    </body>
</html>

但是现在单击按钮时，它不会导航到“callSecondPage”。如果我打电话$.mobile.changePage("index.html", {transition : "slide"}); ，那么它会正确导航到 index.html，那么为什么在多页 changePage 中不起作用？还有一件事如果我用 test.html 代码替换 index.html 代码，那么$.mobile.changePage("#secondtestPage", {transition : "slide"});效果很好。

我很困惑为什么它会这样？任何建议将不胜感激。提前致谢。

4

2 回答 2

6

jQuery Mobile 将异步加载您的test.html文件的内容以过渡到它。您在index.html和test.htmlcallSecondPage()的同一范围内定义了一个函数，这可能有问题。尝试在test.html中将其命名为不同的名称并报告回来。

编辑：

好的，事实证明 jQuery Mobile 并没有实际加载除第一个以外的所有其他 data-role="page" 页面。如果您在从 index.html 转换到 test.html 时检查 DOM，您会注意到第二、第三和第四页丢失了。

这来自 jQuery Mobile 文档：http: //jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html

请务必注意，如果您从通过 Ajax 加载的移动页面链接到具有多个内部页面的页面，则需要在链接中添加rel="external"或data-ajax="false"。这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希。这很关键，因为 Ajax 页面使用哈希 (#) 来跟踪 Ajax 历史记录，而多个内部页面使用哈希来指示内部页面，因此会有冲突。

于 2012-08-08T04:55:47.487 回答
0

我false在方法的末尾添加了值，从而解决了问题：

$.mobile.changePage("#secondtestPage", {transition : "slide"}, false);
于 2013-10-28T12:15:31.030 回答