2012-09-15 13 views
6

私はPhonegapを持っています& jQueryモバイルアプリはAndroidとウェブでうまく動作します。 iOSでは、予期せぬ結果が出ています。これは、ほとんどのアプリケーションプロセスのハンドラをバインドするdocument.pageinitイベントが2回発生しているためです。iOS(jQueryMobile)でドキュメントのページが複数回発生する

いいえ、私はそれを2度はバインドしませんでした。いいえ、私はdocument.readyを使用しませんでした。はい、私は文書の早い段階で、他の機能の中ではなく、文書にバインドしました。

$(document).on('pageinit',function(event){ 
    alert(' Pageinit on document'); 
    //Some more code 
}) 

初めて起動すると、スプラッシュ画面はまだ表示されます。この時点で、MacBook ProをXCodeでテストしても、コンソールは使用できません。console.logを使用した場合、上記のメッセージはコンソールに表示されませんでした。

jQueryMobileが最初のページを作成した直後に2回目の火災が発生します。

この二重点火の原因は何ですか?私はそれについて何ができますか?

編集:私はそのページの後半に気付きましたが、もう一度起動するのではなく、新しいdata-role = 'page' divを開くたびに発生します。下の私の答えを見てください。

答えて

15

にそれを解決する必要があります。

$(document).on('pageinit')は、jQuery Mobileアプリケーションで使用されているページ遷移ごとに発生します。これはHTMLリンクと$.mobile.changePage();を使用した場合の両方で発生します。

驚いたことに、docsにはどこにも言及していません。後続のページごとに起動すると言わずに、あなたはそれを使用するようにアドバイスします。

私は、この問題のある例を$(document).ready()の有効な同等品としてフレームに入れているとは思いません。

複数のコードが実行されないようにするには、.bind()またはon()の代わりに.one()を使用してバインドすることをお勧めします。

+0

Thaaaaank you!私は最後の数分間の解決策を探していました.Googleは "pageinit twice"と言っています。あなたの '.one()'は理想的な解決策です。私ができる場合、私は10でupvote :) – PiotrK

+0

驚くほど、私はデスクトップのブラウザ(IE10とクロム/ Windows)で私のアプリのコードを使用して、iOSではなく、この動作を見てきました。この提案された修正はそのような場合にも役立ちました。素晴らしい提案。ありがとう! –

2

jqueryとjquery mobileを一緒に使用していると思います。 しかし、解決策は簡単です。

$(document:not(.processed)).addClass('processed').on('pageinit',function(event) 

を試してみてくださいこれは私がZoltansの答えを感謝し、それはいくつかのケースでは、関連するかもしれないが、それが原因ではなかった

2

本文を編集すると<body data-role="page">に問題が解決するはずです。

0

私はこの問題を他の人と分かち合わないほど長く苦労していました。そして、私はそれがiOSの下でだけでなく、Androidの下でも問題ではない(それは私のケースではちらつきを引き起こした)と思う。

「pageinit」イベントは、要求が行われるたびに2回呼び出されました。最初は、提供されたURLのデータを取得するのに適切なもの、新しいページがDOMにロードされた後に呼び出されるもの(ドキュメントに動的に挿入されたjQueryMobileページ)でした。私は、この問題を解決するためのより多くの解決策があると思い、ここで鉱山を行く:

$(document).ready(function(){ 
    $(this).delegate("#page-selector", "pageinit", function(ev, data){}); 
    // I don't know why the line has to be present, but otherwise does not work 
}); 

そして、私のHTML文書には、次のようになります。

<html> 
<head>...here goes scripts...</head> 
<body> 
    <div id="#page-selector"> <!-- just wrapper --> 
     <div data-role="page"> 
     ... content... 
     </div> 
    </div> 
</body> 
</html> 

私はそれが他の人のために貴重な時間を割いことを願っています!

関連する問題