Question

我的应用程序有一个按钮（在app.html上），该按钮指向带有导航栏的新页面（app2.html）。导航有一个内部链接（工具栏2），应该显示内部div“page2”。

当来自带有changePage（）的按钮时，单击导航时无法显示内容。似乎reloadPage无效。

app.html看起来像这样：

<body>
    <!-- Home -->
    <div data-role="page" id="page3">
        <div data-role="content">
            <a id="asdf" data-role="button" name="asdf">
                Button
            </a>
        </div>
    </div>
    <script>
        $('#asdf').click(function(){

            $.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });

            });

    </script>
</body>

这是我的app2.html：

<body>
    <!-- Home -->
    <div data-role="page" id="page1">
        <div data-role="content">
            <div id="navigation" data-role="navbar" data-iconpos="right">
                <ul>
                    <li>
                        <a href="app.html" data-theme="" data-icon="">
                            Toolbar1
                        </a>
                    </li>
                    <li>
                        <a href="#page2" data-theme="" data-icon="check">
                            toolbar 2
                        </a>
                    </li>
                    <li>
                        <a href="app.html" data-theme="" data-icon="">
                            Toolbar 3
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="content">
            <div data-role="header">
                <h3>asdfasd</h3>
            </div>
        </div>
    </div>
 </body>

问题出在哪里？我正在使用jQuery 1.7.1和jQuery 1.7.1。

以下是文件： app.html app2.html

Answer 1

第二页中不能有两个jQuery Mobile页面。当您点击app.html中的链接时，它会向app2.html发出ajax请求以获取data-role =“page”，并且只能在html文件中使用。您应该了解single page template和multi-page template之间的差异。

您可以在文档中找到更多内容，查找"Linking within a multi-page document"。

tl; dr：您需要将所有页面放在一个HTML文件中并链接到id或将所有页面放在单独的HTML文件中并链接到该文件。

jQuery Mobile：在changePage之后内容无法正确加载

1 个答案: