25

ajaxナビゲーションページでは、初期化javascriptを実行するための従来の「ドキュメント対応」フォームは単に起動しません。

ajaxがロードされたページでコードを実行する正しい方法は何ですか？

（つまり、私のajaxではありません...そのページに移動するのはjqueryモバイルページナビゲーションシステムです）

わかりました、私はそのような何かを疑っていました...どうもありがとう=）しかし...それはまだ機能しません、ここに私のコードがあります：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mypage</title>

    <link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" />
    <script type="text/javascript" src="jquery-1.5.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script>
    <script type="text/javascript">
        $('div').live('pageshow',function(event, ui){
          alert('ciao');
        });
    </script>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-position="fixed">
            <h1>Shopping Cart</h1>
        </div>

        <div data-role="content"> asd


        </div>

    </div>

</body>

div idを指定する必要がありますか？

4

7 に答える 7

19

JQMのドキュメントは現時点ではあまり詳細ではないため、同じことを調査するのに時間を費やしました. 以下の解決策は私にとってはうまくいきます：

<script type="text/javascript">
$('div:jqmData(role="page")').live('pagebeforeshow',function(){
    // code to execute on each page change
});
</script>

上記のコードはページが変更されるたびに実行されるため、複数の初期化を防ぐために独自のチェック フローを実装する必要があります。

于 2011-04-12T06:42:37.863 に答える
14

「pageinit」イベントにバインドします。JQM ドキュメントから: http://api.jquerymobile.com/pageinit/

于 2011-11-19T06:36:48.047 に答える
12

の最良の等価物$(document).ready()は$(document).bind('pageinit')

jQuery Mobile のドキュメントをご覧ください: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

重要: $(document).ready() ではなく、$(document).bind('pageinit') を使用してください

jQuery で最初に学ぶことは、$(document).ready() 関数内でコードを呼び出して、DOM が読み込まれるとすぐにすべてが実行されるようにすることです。ただし、jQuery Mobile では、ナビゲートするときに Ajax を使用して各ページのコンテンツを DOM にロードし、DOM Ready ハンドラーは最初のページに対してのみ実行されます。新しいページが読み込まれて作成されるたびにコードを実行するには、pageinit イベントにバインドします。このイベントについては、このページの下部で詳しく説明しています。

于 2012-08-14T18:31:21.710 に答える
5

コードを特定のページで実行したい場合 (きっとそうでしょう)、次のパターンを使用できます。

$('div:jqmData(url="thepageyouwanted.html")').live('pageshow',function(){
    // code to execute on that page
    //$(this) works as expected - refers the page
});

使用できるイベント:

  • pagebeforeshow移行直前に開始
  • pageshow移行直後から開始
  • pagecreateページが最初にロードされたときにのみ開始します
于 2011-04-12T06:53:47.083 に答える
3

すべての pageshow および pagebefore show イベントは、表示されるたびに呼び出されます。初めて何かをしたい場合は、次のようにすることができます。

  $('#pageelementid').live("pagecreate", pageInitializationHandler);

その後、コードで次のようにします。

  function pageInitializationHandler(event) {
      //possibly optional based on what exactly you're doing,
      //but keep it in mind in case you need it.
      //Also, this seems to need to be an exact duplicate of the
      //way you used it with the .live() method or jQ/jQM won't unbind
      //the right thing
      $('#pageelementid').die("pagecreate", pageInitializationHandler);

      //Do your actual initialization stuff
  }

これは、複数の JQM「ページ」を含む html ファイルを処理している場合に特に役立ちます。シバン全体の実際の初期化コードが（ファイルの）メインページにあり、他のすべてのサブページに、初期化コードが起動したかどうかを確認するページ作成ハンドラーがあり、そうでない場合は実行するように設定しました$.mobile.changePage("#mainpage")。かなりうまく機能します。

于 2011-09-04T16:43:54.067 に答える
1

前述のとおり、pageinit イベントは機能します。ただし、マルチフィジカル ページの状況 (例: index.html から mypage.html への移動) の場合、実行される関数は親にあります。

pageinit のロジックは、読み込まれるリンクではなく、親に関連するものでなければなりません。ナビゲーションは JQM の ajax コールバックを介して処理され、子ページの項目は範囲外になるため、移動先のページで関数を呼び出すことができませんでした。

この特定のケースでは、data-ajax="false" 属性を使用できます。

<a href="mypage.html" data-ajax="false">My Page</a>

これを行うと、ajax ナビゲーションが削除され、ページ全体がリロードされ、ロードしているページで $(document).ready 関数が起動されます。

于 2012-02-26T21:03:17.013 に答える
0

比較的単純です。私はあなたの問題を理解していると思います。あなたはそのイベントを一度だけ発生させ、繰り返しではなくしたいですか? だったらこうすればいい

$(document).one('pageinit', function(){ // write your code here })

その場合、'pageinit' は 1 回発生します。one()jQuery方式について詳しく知りたい方はこちら

于 2019-01-09T22:32:01.463 に答える