jquery - スクリプトをロードしたページでデータ遷移が機能しない

Question

私は初心者で、Phonegap、jquery、jquery-mobile を使用してアプリを開発しています。私のメイン ページには、次のような部分ページのスクリプト ロードがいくつかあります。

<div id="breakfast" data-role="page"></div>                         
<script>$( "#breakfast" ).load( "partials/breakfast.html" );</script>

このパーシャルには、次のようなナビゲーション バーがあります。

<div data-role="navbar" style="background:black;" id="tab">      
  <ul>                                                           
    <li><a href="#"                                              
        data-role="tab"                                          
        class="ui-btn-active ui-state-persist">Breakfast</a></li>
    <li><a href="#lunch" data-role="tab"                         
        data-transition="slide">Lunch</a></li>                   
    <li><a href="#snack" data-role="tab">Snack</a></li>          
    <li><a href="#dinner" data-role="tab">Dinner</a></li>        
    <li><a href="#other" data-role="tab">Other</a></li>          
  </ul>                                                          
</div>

私の問題は、ページが要求されるまでどういうわけかページが dom にロードされないため、データ遷移が機能しないことです。すべてのページをナビゲートできますが、データ移行が機能しません。

公式ドキュメントを読んだところ、次を使用してページをプリフェッチできることがわかりました。

<a href="prefetchThisPage.html" data-prefetch> ... </a>

しかし、これも機能しません。

私が望むのは、部分ページを引き続き使用して、メイン ページをクリーンに保ち、データ遷移を機能させることです。

誰も手がかりを持っていますか？

前もって感謝します。