jQuery Mobile: Document Ready または Page Events: ページ読み込みの処理にはどちらが適していますか?

jQuery Mobile: ドキュメントの準備とページ イベント

違いを理解する

jQuery Mobile では、ページ イベントの実行時にコードを実行する主な方法が 2 つあります。ロードされています:

1. ドキュメント準備完了($(document).ready()): このイベントは、DOM がロードされ、すべての要素が使用可能になったときにトリガーされます。ただし、jQuery Mobile では、ページが Ajax を使用してロードおよび操作される前に、このイベントが実行が早すぎる場合があります。
2. ページ イベント ($('.selector').on('pageinit/pagebeforeshow' )): これらのイベントは jQuery Mobile 用に特別に設計されており、ページが初期化されるとき、またはページが表示される前にトリガーされます。これらは、特定のページがロードされたときにのみコードが実行されることを保証します。

ページ イベントが優れている理由:

• コードが確実に実行されるようにします。目的のページがロードされて表示された場合のみ。
• これらは、ページを処理するためのより予測可能で一貫した方法を提供します。 events.

ページ イベントの遷移順序

jQuery Mobile であるページから別のページに遷移するとき、一連のページ イベントが次の順序でトリガーされます:

1. ページ B: 作成前のページ
2. ページ B: pagecreate
3. ページ B: pageinit
4. ページ A: pagebeforehide
5. ページ A: pageremove
6. ページ A: pagehide
7. ページ B: pagebeforeshow
8. ページ B: Pageshow

データの操作とパラメータの受け渡し

あるページから別のページへのデータの送信:

• $.mobile.changePage を使用する() に data および dataUrl オプションを指定して、新しいオブジェクトにパラメータを渡しますpage.
• 宛先ページで、$(document).data() または $(document).data("url") を使用してパラメータを取得し、クエリ文字列を取得します。

前のページのデータへのアクセス:

• データをグローバル変数に保存しますまたは、sessionStorage オブジェクトを使用します。
• 新しいページの共有場所からデータを取得します。

複数のイベント バインディングの防止

ページ間を移動するときに同じ要素:

• ドキュメントの代わりにページ イベントを使用する
• イベント フィルター (例:Event(!click)) を使用して、イベントが 1 回だけバインドされるようにします。
• 再トリガーを防ぐには、イベント ハンドラーで e.handled = true を使用します。

以上がjQuery Mobile: Document Ready または Page Events: ページ読み込みの処理にはどちらが適していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。