pagechangeイベントの呼び出しがありません

jQueryモバイルでは、特定のページへのページ変更が成功したことを検出しようとしています。私はロードしたいページにインラインで次のコードを持っています。pagechangeイベントの呼び出しがありません

<script> 
    $(document).bind("pagebeforechange", function(e, data) { 
      alert("pagebeforechange"); 
     }); 

     $(document).bind("pagechange", function(e, data) { 
      alert("pagechange"); 
     }); 
     $(document).bind("pagechangefailed", function(e, data) { 
      alert("pagechangefailed"); 
     }); 
     $(document).live("pagebeforechange", function(e, data) { 
      alert("pagebeforechange live"); 
     }); 

     $(document).live("pagechange", function(e, data) { 
      alert("pagechange live"); 
     }); 
     $(document).live("pagechangefailed", function(e, data) { 
      alert("pagechangefailed live"); 
     }); 
</script>

jQueryのモバイルアプリ内の別の領域から移動するとき、直接ページをロードするか、さわやかな、しかしないとき、私は適切な警告を取得します。

ページは

<div id="footer" data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="index.html">Features</a></li> 
      <li><a href="about.html">Your Car</a></li> 
      <li><a href="index.html">Contact</a></li> 
     </ul> 
    </div> 
</div>

出典

2012-01-27 Mild Fuzz

どのようにページを変更しますか？いくつかのコードを含めることができますか？ – ManseUK

質問にもっと明示しました、ありがとうございます。 –

pageshowまたはpagebefoを使ってページ遷移イベントを試しましたか？ jQM Docs：http://jquerymobile.com/demos/1.0.1/docs/api/events.html –

コードをpageshowイベントに配置することはできますか？ページまたは場所を検出しようとしている可能性があります。多分このような何か：もう少しこのシナリオをテストし、あなたの質問を再読み込みした後

<script type="text/javascript"> 

$('[data-role=page]').live('pageshow', function (event, ui) { 
    hash = location.hash; 
    page = hash.susbtr(1); 

    if (page.indexOf('about.html') >= 0) { 
     alert('you made it!'); 
    } 
}); 

</script>

UPDATE

、私は結果を再現することができたと思います。

これは、あなたが説明するように動作し、唯一の直接のページをロードするか、ページをリフレッシュするときにアラートをトリガー：

<body> 

<div data-role="page"> 
    <!-- page stuff --> 
</div> 

<script type="text/javascript"> ..bind events... </script> 
</body>

しかし、私はページ内に直接JavaScriptを移動するとき、それはすべてを期待どおりに動作し、発射バインドされたイベントは、関係なく、ページが到達しなかった方法：

<body> 

<div data-role="page"> 

    <script type="text/javascript"> ..bind events... </script> 

    <!-- page stuff --> 
</div> 

</body>

出典

2012-01-27 16:09:32 shanabus

私が持っている解決策のソートですが、実際の解決策ではなくハックです。 –

それをテストした後も、私のソリューションはうまくいきません。 'type =" text/jasvascript "'というスクリプトタイプを宣言しておけば助けになるでしょうか？ – shanabus

このアップデートでは、html設定の仕組みを説明していますか？ – shanabus

は、あなたがこのイベントに結合されているフッターに「あなたの車」タブで呼ばれているのですか？

重要

：

あなたはドキュメントhttp://code.jquery.com/mobile/latest/demos/docs/api/events.htmlで次を読んでいる利用pageInit（）ではなく、$（ドキュメント）.ready（）

あなたはjQueryの中で学ぶ最初の事は、コードを呼び出すことです $（document）.ready（）関数内にあります。したがって、 DOMがロードされるとすぐにすべてが実行されます。しかし、jQuery Mobileでは、Ajaxを使用して移動するごとに各ページのの内容をDOMにロードし、DOM準備済みハンドラは最初のページに対してのみ実行します。新しいページがロードされて作成されるたびにコードを実行するには、pageinitイベントにバインドします。このイベントはこのページの下部に詳細に説明されています。

出典

2012-01-27 14:03:37 Luke

私はどちらかを使用していません。テストしてpageinitを実行しても、それはうまく動作していないようで、ドキュメントを読むと、ページチェンジが私の望むものだと思われます。 –

@MildFuzzこれは私が言ったかったことです。 ... – Luke

ルークの考え方は正しい方向にある：明確にあなたが持っていた問題は、コード内で発生している結合が関係しています。これはシャナバスによって証明されています。

しかし、あなたのケースでは、Lukeが示唆しているとおり、pageInitではなく、jQueryモバイルのmobileinitイベントが発生したときにバインディングを実行する必要があります。

例（すべてのページ変更イベントで起動）：

<script type="text/javascript"> 
    $(document).bind('mobileinit', function() { 
     $(document).on('pagechange', function() { 
      window.alert('page changed!'); 
     }); 
    }); 
</script> 
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>

上記のコードに示すように、mobileinitによってトリガハンドラが前のjQueryモバイル<script>タグを含まなければならないことを留意します。

出典

2013-01-06 19:41:05

pagechangeイベントの呼び出しがありません

答えて

関連する問題