Question

我的问题在于Jquery mobile的changePage（），让我先说我知道有关于这个问题的其他一些帖子，但我已经尝试了所有的解决方案，没有任何运气，所以这就是我现在要求的原因帮助

我已经构建了一个Phonegap项目，其中每个屏幕都是一个.html文件。我得到了我的index.html，它加载了整个应用程序所需的所有脚本。然后我的index.html使用$ .mobile.changePage（）加载一个新页面。但是当这种情况发生时，下一页是否有任何脚本或css附加到它为什么？

如果我的index.html

<!--index page used to find out if the user should see the login or welcome page-->
<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-2.0-original.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jqm-icon-pack-fa.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--Used to make sure theres as little delay on old devises as possible-->
<script src="buttonTapDelayJS.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script src="loginJS.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<script src="javaIndex.js" type="text/javascript"></script>
<script src="myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="menuJS.js" type="text/javascript"></script>
<script src="generalFunctionsJS.js" type="text/javascript"></script>
<!--Loads the css for the menu-->
<link href="menuStyle.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    var checkUser="admin";
    function onDeviceReady() {
        /*if the stored username is = the correctusername, it loads the welcome page if not it loads the login*/
        if(window.localStorage.getItem("user") === checkUser){
            $.mobile.changePage("welcome.html",{transition:"slide"});
            //window.open("welcome.html", "_self"); 
        } else {
            //window.open("login.html", "_self");
            $.mobile.changePage("login.html",{transition:"slide"});

        }
    }

    </script>
</head>

<body onload="onDeviceReady()"> 
</body>
</html>

这是我的登录页面

<!--Login page-->
<!DOCTYPE html> 
<html>
<body onload="loadLogin();"> 
<!--Creates all content you see on the screen-->
<div data-role="page" id="login">
    <div data-role="content">
      <ul data-role="listview">
        <div align="center" data-role="content">
        <img src="icon.png" alt="">
        </div>
        <div data-role="content">
          <label for="textinput">Indtast brugernavn</label>
          <input type="text" name="textinput" id="textinput" value=""/>
        </div>
        <div data-role="content">
            <label for="passwordinput">Indtast adgangskode</label>
            <input type="password" name="passwordinput" id="passwordinput" value=""  />
          </span>          </div>
          <div data-role="content">
        <div><a href="#" data-role="button" onClick="saveLogin();myFunction();">Login</a></div>
        </div>
        <div data-role="content">
        <div><a href="#" id="infoButton" data-role="button" data-icon="info" data-theme="b" onClick="infoPopup();"></a></div>
        </div>
      </ul>         
    </div>
</div>
</body>
</html>

如开头所述，我的问题是我的登录页面上没有我的函数可以举一个例子，我得到了运行onClick =“infoPopup（）的infoButton;这个函数生成一个弹出的navigator.notification .alert（“消息”，空，“信息”，“确定”）;但是当我按下它时，它会显示任何内容。

我是否错误地加载了我的脚本或者哪些错误，我们非常感谢任何帮助？

编辑1： 如果我将所有index.html复制到所有其他页面，会发生什么。我的index.html链接到我的login.html正确。在登录页面上我的onClick =“infoPopup（）; dosent工作，但是我的onClick =”saveLogin（）; myFunction（）;“工作类型。我的登录信息确实得到保存，但在我的saveLogin（）;我有一个导航器.notification.alert（）;但警告aint弹出。我知道我的所有函数都工作，因为他们使用window.open（）;而不是changePage。我改变的原因是因为window.open （）;我无法获得jquery页面转换任何想法？

编辑2： 不知道我做了什么，但现在工作:)感谢回复。即使我厌倦了这个对我有用的东西是将所有javascripts和css都移到index.html。

Answer 1

jQuery Mobile不会将整个页面拉入dom，它会抓取第一个data-role =“page”元素及其后代，并将其拉入当前的dom。

因此，不会包含文档中的任何脚本。

我通常会将我网站的所有功能JavaScript放在索引页面上，然后当外部页面加载到dom中时，他们可以从已经加载的脚本中受益。

此外，您可以将JavaScript代码放在data-role =“page”元素中，当jQuery Mobile对其进行AJAX加载时，它将被包含在内。

Answer 2

使用每个html页面中的所有脚本重复head部分，因为更改页面将导致重新加载页面并重新创建head部分。简单的改变，如 -

$.mobile.changePage("welcome.html",
  {transition:"slide"}
 );

Jquery mobile $ .mobile.changePage没有加载脚本

2 个答案: