2

私は JQuery Mobile アプリを持っています。アプリの最初のページで、以前に設定されている場合は、ロード時にいくつかのフィールド値を設定しようとしています。これを行うために、現在、次のものがあります。

索引.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="/resources/css/themes/mobile/core.css" />
    <link rel="stylesheet" href="/resources/css/themes/mobile/app.css" />

    <script type="text/javascript" src="/resources/scripts/jquery-1.9.1.min.js"></script>  
    <script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>     
    <script type="text/javascript" src="/resources/scripts/jquery.mobile-1.3.0.min.js"></script>
  </head>
  <body>
    <div id="loginPage" data-role="page">
      <div data-role="header" data-position="fixed"><h1>AppName</h1></div>
      <div data-role="content">
        <label for="usernameTextBox">Username</label>
        <input id="usernameTextBox" type="text" autocomplete="false" /><br />

        <label for="passwordTextBox">Password</label>
        <input id="passwordTextBox" type="password" /><br />

        <div class="ui-grid-a"><div class="ui-block-a">
          <a href="#" id="loginButton" data-role="button" class="dd-btn-a" onclick="return loginButton_Click();">Login</a></div>
        </div>
      </div>
    </div>
  </body>
</html>

app.ui.js

$("#loginPage").on("pagecreate", function () {
    alert("here 1");
    $.mobile.hidePageLoadingMsg();
});

$("#loginPage").on("pageshow", function () {
    alert("here 2");
    $.mobile.hidePageLoadingMsg();

    var us = false;
    var ps = false;

    var u = window.localStorage.getItem("username");
    if ((u != null) && (u != undefined) && (u.length > 0)) {
        if (u != "undefined") {
            $("#usernameTextBox").val(u);
            us = true;
        }
    }
    alert(u);

    var p = window.localStorage.getItem("password");
    if ((p != null) && (p != undefined) && (p.length > 0)) {
        if (p != "undefined") {
            $("#passwordTextBox").val(p);
            ps = true;
        }
    }

    if ((us == true) && (ps == true)) {
        loginButton_Click();
    }
});

奇妙なことに、私の「アラート」ボックスはどれも起動されません。さらに、コンソール ウィンドウにエラーは表示されません。私は何を間違っていますか？

4

2 に答える 2

4

body 終了タグのapp.ui-1.0.js前にインポートします。</body>それならうまくいく。その理由は、DOM と jQuery ファイルをロードする前に js ファイルが実行されるためです。だから発火しません。

必ず次の順序でインポートしてください

  1. jQuery フレームワーク
  2. jQuery モバイル フレームワーク
  3. jquery プラグイン
  4. カスタム js ファイル

Gajotres が述べたように、次のスニペット内にコードをラップすることをお勧めします。

$(document).on("pagecreate", "#loginPage", function () { 
// your code here
});

以下のようなもの

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="/resources/css/themes/mobile/core.css" />
    <link rel="stylesheet" href="/resources/css/themes/mobile/app.css" />

    <script type="text/javascript" src="/resources/scripts/jquery-1.9.1.min.js"></script>   
    <script type="text/javascript" src="/resources/scripts/jquery.mobile-1.3.0.min.js"></script>
  </head>
  <body>
    <div id="loginPage" data-role="page">
      <div data-role="header" data-position="fixed"><h1>AppName</h1></div>
      <div data-role="content">
        <label for="usernameTextBox">Username</label>
        <input id="usernameTextBox" type="text" autocomplete="false" /><br />

        <label for="passwordTextBox">Password</label>
        <input id="passwordTextBox" type="password" /><br />

        <div class="ui-grid-a"><div class="ui-block-a">
          <a href="#" id="loginButton" data-role="button" class="dd-btn-a" onclick="return loginButton_Click();">Login</a></div>
        </div>
      </div>
    </div>
        <script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>   
  </body>
</html>
于 2013-03-28T12:11:21.730 に答える
2

コードを次のように変更します。

$(document).on("pagecreate", "#loginPage", function () {
    alert("here 1");
    $.mobile.hidePageLoadingMsg();
});

$(document).on("pageshow", "#loginPage", function () {
    alert("here 2");

HTML が DOM に読み込まれる前にページ イベントをバインドしているためです。そして、この行を移動します:

<script type="text/javascript" src="/resources/scripts/app.ui-1.0.js"></script>

jQuery モバイル スクリプト タグの下にあります。

于 2013-03-28T12:10:35.493 に答える