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

Question

我正在尝试将 jQuery Mobile 用于移动网站（在尝试并放弃 jQTouch 之后），我认为这会非常有效。但是，当超链接到第二页时，我遇到了格式问题。

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

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

（由于空间原因，所有页面都以 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

我能够在 alpha3 中解决这个问题，方法是手动进行绑定，

首先关闭 autoInitialize

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

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

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

Answer 2

假设您很好地定义了

另外 - 今天 JQM alpha3 已发布，jquery 1.5 预发布版已经发布。尝试升级。