web-dev-qa-db-ja.com

jQuery mobile $（document）.ready相当

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

Ajaxで読み込まれたページでコードを実行する正しい方法は何ですか？

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

OK、私はそのような何かを疑いました...たくさんありがとう=）しかし...それはまだ機能しません、これが私のコードです：

<!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を指定する必要がありますか？

ajaxjquery-mobiledocument-ready
24
Fabio B.

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

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

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

19
Jura Khrapunov

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

14
Crashalot

$(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対応ハンドラーは最初のページに対してのみ実行されます。新しいページが読み込まれて作成されるたびにコードを実行するには、pageinitイベントにバインドします。このイベントについては、このページの下部で詳しく説明しています。

12
Random78952

特定のページでコードを実行したい場合（そうだと思います）、次のパターンを使用できます。

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

使用できるイベント：

  • pagebeforeshowは移行の直前に始まります
  • pageshowは移行直後に開始します
  • pagecreateは、ページが最初にロードされたときにのみ開始します
5
naugtur

すべての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ファイルを実行しているときに、これが特に役立つことがわかりました。私は、Shebang全体の実際の初期化コードが（ファイルの）メインページにあるように設定し、他のすべてのサブページには、初期化コードが実行されたかどうかをチェックするpagecreateハンドラーがあります。 $ .mobile.changePage（ "＃mainpage"）。かなりうまくいきます。

3
Joe Bedurndurn

前述のように、pageinitイベントは機能します。ただし、マルチフィジカルページの状況（たとえば、index.htmlからmypage.htmlに移動する）の場合、実行される関数は親で実行されます。

Pageinitのロジックは、ロードされるリンクではなく、親に関係するものでなければなりません。ナビゲーションはJQMのajaxコールバックを介して処理され、子ページのアイテムはスコープ外になるため、移動先のページで関数を呼び出すことができませんでした。

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

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

これを行うと、ajaxナビゲーションが削除され、ページ全体を再読み込みします。これにより、読み込んでいるページで$（document）.ready関数が起動されます。

1
Justin Saraceno

比較的シンプルです。私はあなたの問題を理解していると思います、あなたはそのイベントを一度だけ発火させたいのですが、繰り返しはしませんか？その場合は、このようにします

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

その場合、「pageinit」は1回発生します。 one() jQueryメソッドについて詳しく知りたい場合は、 ここ を確認してください

0
Nicholas Mberev