Динамические ссылки в jQuery Mobile теряют форматирование

Question

Я пытаюсь использовать jQuery Mobile для мобильного веб-сайта (после пробного использования jQTouch) и думаю, что это будет работать прекрасно.Однако я столкнулся с проблемой форматирования при гиперссылке на вторую страницу.

У меня есть главная страница index.php, которая содержит всю статическую информацию, которую я хочу отобразить.У меня будет две ссылки, которые сделают SQL-вызовы в базу данных для информации - для этого я беру код из index.php и вызываю отдельную страницу: ucd.php.На этой второй странице загружается динамический список, который детализируется в базе данных, пока они не выберут автомобиль, который ищут.Моя проблема в том, что когда вы переходите с индексной страницы на ucd.php, CSS-форматирование страницы исчезает.Если я загружаю ucd.php сам по себе, он форматируется правильно.Если я выберу index-> ​​ucd.php-> list selection, index отформатирован, ucd.php НЕ отформатирован, 1-й вариант динамического списка отформатирован.

Одна вещь, которую я заметил, это когда ucd.phpвызванный, он изменяет URL-адрес в адресной строке на «http://localhost/#ucd.php" - не» http://localhost/ucd.php". Из того, что я прочитал на сайте jQuery Mobile, он делает это для правильного хранения истории в хэше.Может ли это вызвать какие-либо проблемы с форматированием?

(из-за нехватки места все страницы начинаются с правильной загрузки скриптов. 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>

Я только вставляю выведенный 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

Я смог обойти это в alpha3, выполнив привязку вручную

сначала отключите автоинициализацию

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

и затем, после динамического построения страницы, инициализируйте jquery mobile вручную

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

Answer 2

Если вы правильно определили теги <script> и правильно используете JQM (похоже, что вы это делаете), это может быть проблемой, которую я видел несколько раз с JQM alpha2 и jquery 1.4.4.Попробуйте это с jquery 1.4.3, чтобы увидеть, начинает ли оно работать.

Также - сегодня выпущена JQM alpha3 и уже выпущен предварительный выпуск jquery 1.5.Попробуйте обновить.