javascript - Jquery mobile $.mobile.changePage 未加载脚本

标签 javascript jquery-mobile mobile cordova

我的问题是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("Message", null, "Info", "OK"); 但当我按下它时,它确实发送显示任何内容。

我加载的脚本是错误的还是出了什么问题,任何帮助将不胜感激?

编辑1: 如果我将所有的index.html复制到所有其他页面,会发生什么。我的index.html 链接到我的login.html 正确。在登录页面上,我的 onClick="infoPopup(); 不起作用,但我的 onClick="saveLogin();myFunction();"有点作用。我的登录信息确实被保存,但在我的 saveLogin(); 我有一个导航器.notification.alert(); 但警报不会弹出。我知道我的所有功能都可以工作,因为当我使用 window.open(); 而不是 changePage 时它们就工作了。我更改的原因是因为使用了 window.open (); 我无法获得 jquery 页面转换 有什么想法吗?

编辑2: 真的不知道我做了什么,但现在可以工作了:)感谢您的回复。 尽管我已经厌倦了,但对我有用的是将所有 javascript 和 css 移动到 index.html。

最佳答案

jQuery Mobile 不会将整个页面拉入 dom,它会获取第一个 data-role="page"元素及其后代,并将其拉入当前 dom。

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

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

此外,您可以将 JavaScript 代码放置在 data-role="page"元素内,当 jQuery Mobile 执行页面的 AJAX 加载时,它将包含在内。

关于javascript - Jquery mobile $.mobile.changePage 未加载脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20212127/

相关文章:

Javascript - 如何使用变量分隔符进行分割功能?

javascript - if-else Javascript 语句的语法错误

javascript - Google Maps API 3 - 绑定(bind)后删除圆圈

php - 将输入文件放入 FormData jquery 以提交给 PHP

javascript - 单击后退按钮重新加载上一页

javascript - 如何禁用 Google map 移动布局上的滚动?

ios - 如何在多个 Corona SDK 应用程序之间共享通用代码?

javascript - 使用ripple时PhoneGap错误

javascript - 在phonegap中双击实现

css - webkit 移动输入缩放在添加宽度属性时禁用静止缩放