1

jQueryMobile1.2を使用して簡単なWebアプリを作成しました。このアプリは、メインページのindex.htmlとsettings.htmlという名前の2番目のページで構成されています。メインページのヘッダーセクションには、設定ページを開くためのボタンがあります。

<div data-role="header">
    <h1>Main</h1>
    <a href="settings.html">Settings</a>
</div><!-- /header -->

設定ダイアログで、ユーザーはプログラムオプションを変更できるはずです。この目的のために、ダイアログが開くたびに現在のオプションを設定する関数を実装しました。

$(document).on("pageinit", "#page-settings", function() {
    // numeric text field to change the year of date (settings is an array)
    $("#text-year").val(settings.year);
    ...
});

これまでのところ、これは正しく機能します。

今、私は「pagebeforeshow」や「pageshow」のようないくつかのイベントがあることを読みました。しかし、私はこれらのイベントの違いを理解していません。次のようにトリガーをテストしました。

$(document).on("pageinit", "#page-settings", function() {
    alert("pageinit");
});
$(document).on("pagebeforeshow", "#page-settings", function() {
    alert("pagebeforeshow");
});
$(document).on("pageshow", "#page-settings", function() {
    alert("pageshow");
});

メインページのボタンをクリックすると、3つのイベントがすべて発生し、すべてのアラートが表示されます。では、なぜさまざまなイベントがあるのでしょうか。そして、設定シナリオでどちらを使用する必要がありますか？

プロセスは次のとおりだと思いました。最初にインデックスページに移動すると、そのページのすべての要素がDOMに追加され、インデックスのイベントpageinitとpageshowが発生します。次に、リンクをクリックして設定ページに移動すると、設定ページのすべての要素がDOMに追加され、設定のイベントpageinitとpageshowが発生します。これまでのところ大丈夫です。次に、インデックスページに戻ります。インデックス要素はまだDOMにあるため、pageshowイベントのみが発生しています。次に、設定リンクをもう一度クリックします。設定要素もDOMにある必要があるため、pageshowのみが再度起動する必要があります。しかし、問題は、ページを変更するたびにすべてのイベントが発生することです。だから問題は：なぜ異なるイベントがあるのですか？また、テキストボックスの塗りつぶしやボタンクリックのトリガーはどこに配置すればよいですか？

4

1 に答える 1

3

  • 「pageinit」は、DOMの準備ができるとトリガーされます。これは、ページがダウンロードされたときに変数を初期化する場合に役立ちます。

  • 「pagebeforeshow」は、ページが表示される直前にトリガーされます。このイベントは、 divやHTML構造の追加など
    、表示する前にアクションを実行する必要がある場合に使用できます。

  • 「pageshow」は、ページが表示されたときにトリガーされます。このイベントを使用して、クリックイベントやその他のイベントを追加します。

イベントの詳細については、ドキュメントをご覧ください：http: //api.jquerymobile.com/category/events/

于 2013-03-20T21:48:56.103 に答える