我有 page1,它是 index.html,它是一个独立的网站,包括标题和脚本等。我在此页面上有一个按钮,单击该按钮将通过 ajax 加载 page2 并将 page2 插入 page1。Page2 只是其中的 div data-role="page" 和 html,它不是一个独立的页面。但是,url 更改为 page2.html,然后如果我“刷新”页面,它不会加载完整的页面,因为 page2 不是完整的页面,它只是被注入到 page1 中。
我尝试设置 data-url="index.html&dashboard"(dashboard 是 page2 上的主要 id),在这种情况下,url 看起来正确,因为它仍然是 index.html&dashboard,因此即使您在 page2 上,页面刷新也会重新加载 page1。但是现在,jquery 吓坏了并永远坐在加载屏幕上,因为它找不到“仪表板”,因为该内容仅在用户单击按钮后才添加。
我该如何解决这个问题?
谢谢。
page1 index.html
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<script><script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8" src="js/global.js"></script>
<script type="text/javascript" charset="utf-8" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Login</h1>
</div>
<!-- /header -->
<div data-role="content">
<div class="row">
<label for="login_name">Login Name:</label> <input
class="ui-input-text" type="text" name="login_name" id="login_name" />
</div>
<div class="row">
<label for="basic">Password:</label> <input class="ui-input-text"
type="password" name="password" id="password" />
</div>
<div class="row">
<input type="checkbox" name="remember" id="remember" class="custom"
data-mini="true" /> <label for="remember">Remember Me</label>
</div>
<div class="row">
<input type="submit" id="submit" name="submit" value="Submit" />
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</html>
page2仪表板.html
<div id="dashboard" data-role="page" data-theme="b" data-url="index.html&dashboard">
<div data-role="header" data-theme="b">
<h1 id="page_title">Dashboard</h1>
</div>
登录.js
$(function() {
$("#submit").click(function() {
if ($("#login_name").val() == "") {
alert("Please enter a login name");
return false;
}
if ($("#password").val() == "") {
alert("Please enter a password");
return false;
}
$.post(URL + 'login', {
'APIKEY' : APIKEY,
'login' : $("#login_name").val(),
'password' : $("#password").val()
}, function(data) {
if (data.error == "") {
$.mobile.changePage("dashboard.html", { transition : "slide" });
} else {
alert(data.error);
}
}, "json");
});
});