JQuery Mobile - 何时将JavaScript加载到DOM中?

时间:2012-02-22 15:50:31

标签: javascript css dom

我有一个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的。我做错了什么?

1 个答案:

答案 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" });
    }
});

});