У меня есть приложение JQuery Mobile, и у меня есть несколько мест в приложении, где JavaScript не выполняется должным образом.Короче говоря, у меня есть страница «Панель инструментов».Если пользователь не вошел в систему, я использую функцию «changePage», чтобы отправить его обратно на страницу входа.
Если я попытаюсь войти напрямую через страницу входа, все работает как положено.Однако, если я перенаправлен на страницу входа со страницы панели мониторинга, я вижу ошибку 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" });
}
});
логин.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.Что я делаю не так?