18

私は5ページあります-簡単にするために言うことができます：

  • one.html
  • two.html
  • three.html
  • four.html
  • five.html

個々のページをロードすると、pageinitとpagecreateが両方とも正しく起動しています。

問題：

one.htmlからtwo.htmlに移動し、pageinit両方が起動する場合、ただし、 pagecreateone.html（two.htmlから）に戻ると、起動しpageinitないpagecreateでください。

これはなぜですか。また、各ページをナビゲートするだけでなく、常に起動pageinitしてページを読み込むにはどうすればよいですか。pagecreate

アップデート：

私が持っている各ページについて：

<div data-role="page" id="page-name">

 // content
</div>

物事が発火しているときに注文をテストするには、次のようにします。

$(document).on('pagecreate','[data-role=page]', function(){
  console.log('PAGECREATE');
});
$(document).on('pageinit','[data-role=page]', function(){
  console.log('PAGEINIT');
});
$(document).on('pagebeforeshow','[data-role=page]', function(){
  console.log('PAGEBEFORESHOW');
});
$(document).on('pageshow','[data-role=page]', function(){
  console.log('PAGESHOW');
});

ページチェンジを使用して常にとを呼び出すにはどうすればよいですpageinitかpagecreate

4

7 に答える 7

27

あなたは間違ったイベントをチェックしています、pageinitとpageshowはあなたが心配すべきものです。

pageinitは、ページが初めて読み込まれるたびに起動します。jQMはページをDOM /メモリにキャッシュするため、two.htmlからone.htmlに戻ると、pageinitは起動しません（すでに初期化されています）。

pageshowは、ページが表示されるたびに発生します。これは、two.htmlからone.htmlに戻るときに探す必要があるものです。

一緒に、多くのクリーンなコードを実行し、初期化、構成などにpageinitを使用して、DOMを初期状態に更新できます。ビュー間で変更される可能性のある動的データがページにある場合は、pageshowで処理してください

実稼働環境で使用する大規模なWebサイトの優れたデザインは次のとおりです。

  1. ライブイベントをすべてのページ/ダイアログにバインドします。pageinitおよびpageshowイベントは、すべてのページにある一部のインクルードにあります。

    $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

  2. 各ページを名前で参照します<div data-role="page" data-mypage="employeelist"> 。このライブイベントでは、基本的に各ページの「名前」にswitchステートメントを設定し、event.typeでpageinit / pageshowまたはその両方を確認して、そこにコードを配置します。作成/表示されたこのイベントは発生し、どのページがそれをトリガーしたかを認識し、対応するコードを呼び出します

  3. これで、ユーザーがサイトにアクセスするエントリポイントに関係なく、すべてのページのすべてのハンドラーが読み込まれます。すでにご存知かもしれませんが、ページに移動すると<script/>、div [data-role = "page"]内にのみ取り込まれます-のJSを無視すると<head/>、各ページに個別のJSを配置するのは面倒なので、私が信じるどんな大きなサイトでも

  4. jQueryでブランケットセレクターを使用しないようにしてください。たとえば$('div.myClass')、複数のjQMページが含まれている可能性のあるすべてのDOMが検索されるためです。幸い、上記のpageinit / pageshowのライブイベントハンドラーでthisは、現在のページを参照しています。したがって、その中のすべてのDOM検索を実行します。たとえば$(this).find('div.myClass')、これにより、現在のページ内の要素のみを取得するようになります。（もちろん、これはIDの問題ではありません）。pageshowイベントでも使用できますが$.mobile.activePage、これはpageinitでは使用できないため、一貫性を保つために使用していません。


最終的にコードが多すぎたため、各ページのjsが個別のjsファイルに含まれ、ライブイベントにハンドラーを登録できるハンドラーオブジェクトを作成しました。

欠点は、サイト全体のすべてのjsがユーザーが最初にアクセスするページに読み込まれることですが、大規模なサイトでもjQueryやjQMよりも小さいため、これは問題になりません。しかし、あなたのサイトが本当に大きい場合は、RequireJSを調べることができると思います。

利点は、ユーザーが新しいページに移動するたびに、AJAXを介して各ページのすべてのJSをロードする必要がなくなることです。エントリー時にすべてのJSが利用できる場合は、デバッガーステートメントを配置してデバッグをはるかに簡単に行うことができます。

于 2012-05-10T22:04:52.783 に答える
3

私は、ページが最初に初期化され、DOMで作成されたときに、両方とも1回だけ呼び出されると信じpageinitています。pagecreate

pagechangeイベントを調べることをお勧めしますhttp://jquerymobile.com/test/docs/api/events.html

于 2012-05-10T16:54:30.400 に答える
1

jQuery Mobileのイベントドキュメントをよく読む必要があります：http：//jquerymobile.com/demos/1.1.0/docs/api/events.html

上記のリンクは、各イベントがいつ発生するかについての優れた洞察を提供します。ここに、ページからのいくつかのサンプルがあります。

pageinit

初期化が発生した後、初期化中のページでトリガーされます。DOM ready（）の代わりにこのイベントにバインドすることをお勧めします。これは、ページが直接読み込まれるかどうか、またはコンテンツがAjaxナビゲーションシステムの一部として別のページにプルされるかどうかに関係なく機能するためです。

。

ページショー

トランジションアニメーションが完了した後、「toPage」でトリガーされます。このイベントのコールバックは、データオブジェクトを2番目の引数として受け取ります。このデータオブジェクトには、次のプロパティがあります。prevPage（オブジェクト）移行先のページDOM要素を含むjQueryコレクションオブジェクト。アプリケーションの起動時に最初のページがトランジションされると、このコレクションは空になることに注意してください。

実際に質問に答えるには、を使用せずpageinit、を使用してくださいpageshow。pageshowページの最初の表示（pageinit要素でイベントが発生した直後）だけでなく、その後のページへのアクセスでも発生します。

于 2012-05-10T20:12:47.683 に答える
0

ページをロードする前に毎回関数を呼び出したい場合は、pagebeforeshowを使用できます。

  $("#YourPageID").on('pagebeforeshow ', function() {
        //YourFunctionCall();
    });

また、pageinitをページIDにバインドしてみることができますが、ページをDOMに挿入している間、ページinitは1回だけ呼び出されます。http://jquerymobile.com/test/docs/api/events.html

  $("#YourPageID").on('pageinit', function() {
        //YourFunctionCall();
    });
于 2012-05-10T20:06:27.920 に答える
0

このコードを確認してください：

$( document ).delegate("#pageid", "pageinit", function() {  
    console.log('PAGEINIT');    
});
于 2012-05-11T09:11:58.530 に答える
0

以下は正常に動作します

<div data-role="page" id="signupForm">
    ...
    ...
<script type="text/javascript" src="test.js"></script>
</div>

test.jsには次のコードが含まれている可能性があります

// test.js starts here

$('#signupForm').on('pageinit', function(){
    // your code goes here
    ...
    ...

 });
// test.js ends here

ログインフォームには、signupFormへのリンクが含まれている場合があり、 signupFormにリンクするhrefタグにdata-ajax="false"を含める必要があります。

ハッピーコーディング

クプラム

于 2013-04-20T02:11:25.810 に答える
0

このページへのajaxリクエストの場合は、スクリプトを本文に書き込む必要があります。そうしないと、ajaxではまったく機能しません。

<!DOCTYPE html>
<html>
  <head>
..........
  </head>
  <body>
    <div data-role="page" data-control-title="Detail" id="self_edit_page" data-theme="e">
...........
  </div>
  <script type="text/javascript" language="javascript" >
  $('#self_edit_page').bind("pagebeforeshow",function(event)
.......
  </script>
   </div>
  </body>
</html>
于 2014-06-20T08:37:13.793 に答える