0

我是来自意大利的网络开发人员...我在加载 href 示例时遇到问题：我有一个带有此代码的 html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>dkrMobile</title>
    <!--caricamento librerie-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
    <div data-role="content">
        <div style=" text-align:center">
            <img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
        </div>
        <form action="#pageFile">
            <div data-role="fieldcontain">
                <label for="userNameLogin">
                    Username
                </label>
                <input name="" id="userNameLogin" placeholder="" value="" type="text">
            </div>
            <div data-role="fieldcontain">
                <label for="passwordLogin">
                    Password
                </label>
                <input name="" id="passwordLogin" placeholder="" value="" type="password">
            </div>

            <a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
                Login
            </a>

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

以及带有此代码的 two.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>dkrMobile</title>
    <!--caricamento librerie-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
    <script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />

    <!--css userinterface-->
    <link rel="stylesheet" href="css/ui.css" />




</head>
<body>

<div data-role="page" id="loadingPage">
    <div data-role="content">
    <h1>caricamento di tutti i contenuti in corso</h1>
    <a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
    </div>
</div>

<div data-role="page" id="pageFile">
    <div data-role="content">
    <h1>dueeee</h1>

    </div>
</div>

<!-- FILE-->

</body>
</html>

现在如果点击登录 - two.html 将不会被加载。

想要演示？ 这里是演示

如果我单击 two.html 中的跳过不显示任何内容（如果我刷新页面它开始工作）。

唯一的方法是 data-ajax="false" ？为什么？

4

1 回答 1

6

这不是错误。要理解这个问题，您必须了解 jQuery Mobile 的工作原理。

多HTML模板不能与多页模板混合使用。例如，在处理多个HTML页面时，只有第一个页面可以有多个页面。当 jQuery Mobile 加载其他HTML文件时，它将删除 HEAD（我们不需要它，因为第一个HTMLHEAD 内容已经加载到 DOM 中）并且它只会加载它可以在文件中找到的第一页，其他所有页面都将被丢弃。

data-prefetch在这里不会帮助你。此外，您的初始化不正确， data-prefetch 属性没有值，它只是data-prefetch，例如：

<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>

如果您想了解更多 jQuery Mobile 如何处理多个 HTML 和多个页面模板或者它们是什么，请查看这篇文章或这篇文章。为了透明，它们是我的个人博客文章。您需要知道的一切都可以在那里找到。

基本上解决您的问题的方法是将所有页面放在一个HTML文件中，或者您应该将 two.html 分成两个单独的HTML文件。您决定什么是最适合您的解决方案。

于 2013-07-12T10:31:57.550 回答