jQuery Mobile中的动态链接丢失格式

Question

我正在尝试使用jQuery手机开发一个移动网站(在尝试并抛弃了jQTouch之后)，我认为这将会很好地发挥作用。但是，当超链接到第二个页面时，我遇到了格式问题。

我有一个主index.php页面，其中包含我想要显示的所有静态信息。我将有两个链接，它们将对数据库进行SQL调用以获取信息--对于这两个链接，我将从index.php中提取代码并调用一个单独的页面: ucd.php。第二个页面加载一个动态列表，该列表向下钻取到数据库中，直到他们选择了他们正在寻找的汽车。我的问题是，当你从索引页面链接到ucd.php时，页面的CSS格式就消失了。如果我自己加载ucd.php，它会正确地格式化。如果我去索引-> ucd.php ->列表选择，索引是格式化的，ucd.php没有格式化，第一个动态列表选项是格式化的。

我确实注意到一件事，当调用ucd.php时，它会将地址栏中的地址更改为"http://localhost/#ucd.php“，而不是"http://localhost/ucd.php"”。根据我在jQuery移动网站上读到的内容，它这样做是为了在散列中正确地保留历史记录。这会导致任何格式问题吗？

(由于空间原因，所有页面都以w/开头，并进行了适当的脚本加载。jQuery Touch 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>

我只粘贴从.php页面输出的HTML码

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和jQuery1.4.4中见过的几次问题。在jquery 1.4.3中尝试一下，看看它是否开始工作。

另外，今天JQM alpha3发布了，jQuery1.5预发行版已经发布了。请尝试升级。

Answer 2

我可以在alpha3中通过手动绑定来解决这个问题

首先关闭autoInitialize

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

然后，在动态构建页面之后，手动初始化jquery mobile

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