2013-05-15 14 views
8

私はCordova/PhoneGapとJQuery Mobileを使用するアプリケーションをビルドしています。Phonegap Projectで通常のJQueryを使用する(JQuery Mobileを使用)

私はアプリケーション内でJQueryを使いたいですが、動作させることはできません。単純なコードでも何も起こりません。

私が正しく設定ヘッダを持っていると信じてい

<script type="text/javascript" src="cordova-2.7.0.js"></script> 
     <script type="text/javascript" src="js/jquery.min.1.9.js"></script> 
     <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script> 
     <script type="text/javascript" src="js/myscripts.js"></script> 
     <script type="text/javascript"> 
      app.initialize(); 
      </script> 

私はjQueryのモバイルスタイルのヘッダを取得し、バックボタンなどなど

しかし、私は単純なもののようにしようとすると:

document.addEventListener("deviceready", function(){ 
    $('p').append("<strong>HEllO</strong>"); 
}); 

myscripts.jsファイルには何もありません。別の方法でJQueryをトリガする必要がありますか?誰かが私を正しい方向に向けることができますか?

EDIT

私はdivの中にそれを入れ言及thisを見つけました。これは実際に私のために働いた、例えば

<div class="normal" data-role="page" data-title="Program"> 
      <script type="text/javascript"> 
      $(".normal").on('pageinit', function() { 

      $('p').append("<strong>HEllO</strong>"); 
      }); 
      </script> 

しかし、確かに良い方法ですか?これらのスクリプトをすべて外部のファイルに保存する方法が必要ですか?

PS:私のHTMLは次のとおりです。

<body> 
     <div data-role="page" data-title="Program"> 
      <div id="programholder"> 
       <div data-role="header"> 
        <a href="index.html" data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l" data-iconpos="left">Back</a> 
        <h1>HEADER</h1> 
       </div><!--HEADER--> 
       <div data-role="content"> 
        <p> 
        Append here 
        </p> 
      </div><!--CONTENT--> 
      </div><!--HOLDER-->  
     </div><!--PAGE--> 
    </body> 

答えて

12

あなたはjQueryのモバイルがどのように機能するかを理解しなければならない問題を理解するために。それはajaxを使って他のページを読み込みます。

最初のページは正常にロードされています。そのHEADとBODYはDOMにロードされ、他のコンテンツを待つためにそこにあります。 2ページ目が読み込まれると、そのBODYコンテンツだけがDOMに読み込まれます。

したがって、HEADが破棄されるため、ページごとにjsファイルを分割したい場合は、BODYから初期化する必要があります。このよう

<body> 
    <script> 
     // Your javascript will go here 
    </script> 
    // And rest of your HTML content 
</body> 

同じことがあなたのLINKとSTYLEタグになります。

あなたはもっとこのトピックについての例と私の他の記事読んで知りたい場合は、次の

document.addEventListener("deviceready", function(){ 
    $('p').append("<strong>HEllO</strong>"); 
}); 
Why I have to put all the script to index.html in jquery mobile

他の事をjQueryのモバイルで作業する場合、初期設定のこの種を使用することはありません

また、古典的なjQueryドキュメントを用意する必要もありません。それらのボットは通常、ページがDOMに正常にロードされる前にトリガーされます。そのため、jQuery Mobileにはページ・セットが用意されています。そして、あなたはpageinitイベントを使って正しいが、間違った方法でそれをやった。jQuery Mobile: document ready vs page events

+0

ああ:あなたはより多くのページイベント差VS準備文書に関する私の他の答えを読んで知りたい場合は

$(document).on('pageinit', ".normal",function() { $('p').append("<strong>HEllO</strong>"); }); 

:jQueryのモバイルページイベントの次のようにバインドされるべきです!それは理にかなっている。だから私はインデックスページのヘッダーにすべての私の外部のスクリプトへのリンクを置く場合、私は推測にぴったりだろうすべてがうまくいくだろうか? – MeltingDog

+0

あなたは正しいです、それは実践的でエステの観点から、最良のアプローチです。 – Gajotres

関連する問題