4

次の構文のindex.htmlファイルがあります

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<a href="occassion.html">
  <img class="frametoicon" src="img/occasion.png" />
</a>
</body>
</html>

次に、次のような機能を持つoccassion.htmlページがありますbody onload

  <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title>Occassion</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>

    function loaded() {
        alert("hii");
    }
</script>
</head>
<body onLoad="loaded()">
</body>
</html>

しかし、onload機能が起動しません....ページを更新しようとすると（occassion.html）、onload機能が起動します... からナビゲートしたときに機能しないのはなぜindex.htmlですか？

jQueryファイルを削除すると、期待どおりに機能します....何が足りないのですか?

これも機能していません

 $(document).ready(function () {
        loaded();
    });

編集

追加した

 <script>
    $(document).bind("pagechange", function (event, data) {
        console.log(data);
        var toPage = data.toPage[0].id;
        alert(toPage);
        if (toPage == "page2")
            alert("hello");
    });
</script>

そしてoccassion.htmlに以下を入れてください

<div data-role="page" id="page2">
 hello
 </div>

驚いたことに、アラート (hello) も発生していませんが、hello も表示されず、アラート (topage) が空になっています。

どうですか？何が足りない

4

2 に答える 2

9

jQuery Mobile は AJAX を使用してページを DOM に取り込みます。これにより、ページ間を遷移できます。jQuery Mobile がこれを行う場合、window.loadイベントが発生した後にそれを行う可能性が高いため、通常、ページを更新しない限りイベントは発生しません (その後、window.load再度発生します)。ユーザーがリンクをクリックして、イベントが発生する前にロードすることは可能だと思われますが、それwindow.loadが標準になるとは思いません。

pageload修正は、jQuery Mobile 固有のイベントを使用することです。この場合、おそらく/ pagecreate/を探しているはずです。pageinitそれらに関するドキュメントは、http: //jquerymobile.com/demos/1.2.0/docs/api/events.htmlを参照してください。

これがどのように機能するかの簡単な例を次に示します (このコードは中央に配置され、各ドキュメントに含まれます)。

$(document).on("pageinit", "#occasions", loaded);

行事ページの要素に#occasionsなることに注意してください。data-role="page"

于 2013-02-06T17:47:51.133 に答える
3

編集

実際、あなたは jquery mobile を使用しているため、別の場所で問題を探している可能性があります。

したがって、 jquery mobile apiに行くと、pagechangeちょっとしたpageloadイベントが必要であることがわかります。

于 2013-02-06T17:05:56.143 に答える