Jquery mobile href链接不加载新页面

Question

Jquery mobile href链接不加载新页面

我是来自意大利的web devoper ...我有一个加载href示例的问题:我有一个带有此代码的one.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>

Run Code Online (Sandbox Code Playgroud)

以及带有此代码的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>

Run Code Online (Sandbox Code Playgroud)

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

想要一个演示？在这里演示

如果我点击两个跳过,不要显示任何内容(如果我刷新页面,它开始工作).

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

Answer 1

Gaj*_*res 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>

Run Code Online (Sandbox Code Playgroud)

如果您想了解更多jQuery Mobile的如何处理多个HTML和多页模板或他们看看这是什么文章或本之一.为了透明,他们是我个人的博客文章.您可以在那里找到您需要知道的一切.

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

归档时间：	12 年，6 月前
查看次数：	7816 次
最近记录：	12 年，6 月前