JQuery Mobile-JavaScript何时加载到DOM中

JQuery Mobile - When is JavaScript loaded into the DOM?

本文关键字：DOM 加载 Mobile-JavaScript 何时 JQuery      更新时间：2023-09-26

我有一个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>

共享.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，我觉得有些事情我不明白。我做错了什么？

在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" });
    }
});
});
相关文章：