我的问题是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/