jQuery Mobileのダイナミックリンクがフォーマットを失う

Question

jQuery MobileをモバイルWebサイト（jQTouchを試してみた後）に使用しようとしています。これは美しく動作すると思います。しかし、私は2ページ目にハイパーリンクするときにフォーマット上の問題に遭遇しました。

メインのindex.phpページには、表示したいすべての静的情報が含まれています。私は情報のためのデータベースにSQL呼び出しを行う2つのリンクを持っています - これらのために、私はindex.phpからコードを取り出し、別のページを呼び出します：ucd.php。この2番目のページでは、探している車を選択するまでデータベースにドリルダウンする動的リストを読み込みます。私の問題は、あなたがインデックスページからucd.phpにリンクしているときに、ページのCSSフォーマットがなくなったことです。自分自身でucd.phpをロードすると、適切にフォーマットされます。私がindex->​​ ucd.php->リスト選択を行った場合、インデックスはフォーマットされ、ucd.phpはフォーマットされず、第1の動的リストオプションはフォーマットされます。

私が気付いた事は、ucd.phpが呼び出されると、アドレスバーのURLが "http：//localhost/#ucd.php"に変更されます。 "http：// localhost/ucd .php "。私がjQuery Mobileサイトで読んだことから、履歴を適切にハッシュに保つためにこれが行われます。フォーマットに問題があるのでしょうか？

（スペース上の理由から、すべてのページがW開始/及び適切なスクリプト負荷が行っている。jQueryのタッチ1.0a2の、jQueryの1.4.4）

index.php: 
<div id="mainpage" data-role="page" data-theme="a"> 
<div data-role="header" data-theme="a"> 
    <h1>Car Dealership</h1> 
</div><!-- header --> 
<div data-role="content"> 
    <ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a"> 
    <li><a href="ncd.php" data-transition="slide">Search New Cars</a></li> 
    <li><a href="ucd.php" data-transition="slide">Search Used Cars</a></li> 
    <li><a href="#service" data-transition="slide">Service/Parts Info</a></li> 
    <li><a href="#location" data-transition="slide">Find Us</a></li> 
    <li><a href="tel:8888675309" data-transition="slide">Call Us @ 888-867-5309</a></li> 
    <li><a href="#hours" data-transition="slide">Hours of Operation</a></li> 
    </ul> 
</div><!-- content --> 
<div data-role="footer" data-theme="a"> 
    <h4>Thanks for visiting us!</h4> 
</div><!-- footer --> 
</div> 

私だけから出力されたHTMLコードを貼り付けています任意の助けを事前に.phpのページ

ucd.php: 
<div id="ucdmain" data-role="page" data-theme="a"> 
<div data-role="header" data-theme="a"> 
<h1>Used Cars</h1> 
</div><!-- header --> 
<div data-role="content"> 
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a"> 
<li><a href="ucd.php?ucd=make&make=Chevrolet" data-transition="slide">Chevrolet</a></li> 
<li><a href="ucd.php?ucd=make&make=Chrysler" data-transition="slide">Chrysler</a></li> 
<li><a href="ucd.php?ucd=make&make=Dodge" data-transition="slide">Dodge</a></li> 
<li><a href="ucd.php?ucd=make&make=Ford" data-transition="slide">Ford</a></li> 
<li><a href="ucd.php?ucd=make&make=GMC" data-transition="slide">GMC</a></li> 
<li><a href="ucd.php?ucd=make&make=Honda" data-transition="slide">Honda</a></li> 
<li><a href="ucd.php?ucd=make&make=Hyundai" data-transition="slide">Hyundai</a></li> 
<li><a href="ucd.php?ucd=make&make=Infiniti" data-transition="slide">Infiniti</a></li> 
<li><a href="ucd.php?ucd=make&make=Jeep" data-transition="slide">Jeep</a></li> 
<li><a href="ucd.php?ucd=make&make=Lincoln" data-transition="slide">Lincoln</a></li> 
<li><a href="ucd.php?ucd=make&make=Nissan" data-transition="slide">Nissan</a></li> 
<li><a href="ucd.php?ucd=make&make=Toyota" data-transition="slide">Toyota</a></li> 
<li><a href="ucd.php?ucd=make&make=Volkswagen" data-transition="slide">Volkswagen</a></li> 
</ul> 
</div><!-- content --> 
<div data-role="footer" data-theme="a"> 
<h4>Thanks!</h4> 
</div><!-- footer --> 

おかげで、 ジョシュ・ホーガン

Answer 1

<script>タグをうまく使用していて、JQMを適切に使用しているとすれば、これはJQM alpha2とjquery 1.4.4で数回見られた問題かもしれません。 jquery 1.4.3で試してみましょう。

また、本日、JQM alpha3がリリースされ、jquery 1.5のプレリリース版が既にリリースされました。アップグレードを試みてください。

Answer 2

私が最初autoInitialize

$(document).bind("mobileinit", function() { 
    $.extend($.mobile, { 
     autoInitialize: false 
    }); 
}); 

をオフにして、あなたが動的にページを構築した後、jqueryの携帯電話を初期化し、手動で結合

を行うことにより、アルファ3で、このために周りの仕事を得ることができました手動で

$(function() { 
    yourdynamicfunction(); 
    $.mobile.initializePage(); 
});