在jQuery Mobile中的动态链接失去格式

我想为移动网站使用jQuery Mobile（在尝试和开始jQTouch之后），我认为这会很好地工作。但是，当超链接到第二页时，我遇到了格式问题。在jQuery Mobile中的动态链接失去格式

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

我注意到的一件事是，当调用ucd.php时，它会将地址栏中的URL更改为“http：//localhost/#ucd.php” - 而不是“http：// localhost/ucd .PHP”。从我在jQuery Mobile网站上读到的内容来看，它会将这些历史记录保存在散列表中。应该导致任何格式问题？

（由于空间的原因，所有的页面开始瓦特/并有适当的剧本载荷完成的。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 -->

在此先感谢您的帮助，乔什 - 霍根

来源

2011-02-03 DrHogie

假设你已经定义好<script>标签，并且正确使用JQM（看起来像你），这可能是一个问题，我用JQM alpha2和jQuery 1.4.4看了几次。用jquery 1.4.3试试看它是否开始工作。

此外 - 今天JQM alpha3发布和jquery 1.5预发行已经出来。尝试升级。

来源

2011-02-04 14:31:51 naugtur

这证实了我害怕 - 只是在alpha版本中的错误。感谢你的回答！ – DrHogie 2011-02-04 19:06:07

我能够做得到一个工作围绕这个在素α3手动绑定

先关闭autoInitialize

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

，然后你已经动态生成的页面后，初始化jQuery Mobile的手动

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

来源

2011-03-01 17:17:26 chrishawn

，并且要小心如果你正在做异步调用或回调，它需要在它们结束时触发。 – chrishawn 2011-03-01 17:21:04

在jQuery Mobile中的动态链接失去格式

回答

相关问题