我有一个JQuery Mobile应用程序,我似乎在应用程序中有几个位置,JavaScript没有按预期执行。简而言之,我有一个“仪表板”页面。如果用户尚未登录,我使用“changePage”功能将它们发送回登录页面。
如果我尝试直接通过“登录”页面登录,则一切都按预期工作。但是,如果我从Dashboard页面重定向到Login页面,我会看到一个JavaScript错误,上面写着:“loginButton_Click未定义”。为了提供更多见解,这是我的代码:
Dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dashboardPage" data-role="page">
<div data-role="header">
<a id="logoutButton" href="#" class="ui-btn-left jqm-home">Logout</a>
<h1>My App</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><span id="greeting"></span></li>
</ul><br />
</div>
</div>
</body>
</html>
Shared.js
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
的login.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="loginPage" data-role="page">
<div data-role="header"><h1>App Name</h1></div>
<div data-role="content">
<label for="usernameTextBox">Username</label>
<input id="usernameTextBox" type="text" /><br />
<label for="passwordTextBox">Password</label>
<input id="passwordTextBox" type="password" /><br />
<input type="button" value="Login" onclick="return loginButton_Click();" />
</div>
</div>
<script type="text/javascript">
function loginButton_Click() {
$.mobile.changePage("/dashboard.html", { transition: "slide" });
}
</script>
</body>
</html>
我觉得有些东西我不明白JavaScript是如何进入DOM的。我做错了什么?
答案 0 :(得分:0)
在shared.js中添加$(...)包装器:
$(function(){
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
});