Проблема с отображением списка миниатюр списка в jqmobile

Question

Здравствуйте, у меня проблема с отображением списка миниатюр в jqmobile.

Если бы я попытался>

      <li> 

      <img src="images/album-bb.jpg" /> 

      <h3><a href="index.html">Broken Bells</a></h3> 

      <p>Broken Bells</p> 

      </li> 

Это все ОК и выглядит как>

http://jquerymobile.com/demos/1.0a3/docs/lists/lists-thumbnails.html

Но если я попытаюсь сгенерировать его динамически с помощью

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: xmlParser
    });
});

function xmlParser(xml) {

//Hide .gif loader image if data are succesully fetched
   // $('#load').fadeOut();

    $(xml).find("SHOPITEM").each(function () {

   $("ul").append("<li><img width=\"80px\" src=\""+$(this).find('IMGURL').text()+"\"/><h3><a href=\""+$(this).find('URL').text()+"\">"+$(this).find('PRODUCT').text()+"</a></h3><p>"+$(this).find('PRICE_VAT').text()+"</p></li>");


    });



}

Элементы отображаются, но содержимое не отформатировано правильно.

Где может быть проблема, пожалуйста?

Спасибо за любой совет ..

Answer 1

Вы, вероятно, уже решили это к настоящему времени, но если нет, и ради других, у которых может быть та же самая проблема, я опубликую это потенциальное решение:

Весьма вероятно, что ваш CSS не применяется к элементам DOM (HTML), генерируемым и вставляемым в DOM вашей функцией AJAX. Не работая над этим, я подозреваю, что вам, возможно, придется применить встроенный CSS с вставленным в него HTML-кодом.

Я столкнулся с подобной проблемой, когда HTML вставлялся через AJAX и пытался применить к нему новые функции JavaScript. В jQuery было разработано решение для этой функции, которое называется функцией live (), но я не уверен, что в jQuery есть встроенная функция для применения CSS таким же образом.

Так вот такая строка:

.append('<li>This text is red</li>');

станет:

.append('<li style="blue">This text is blue</li>');

Rick

Answer 2

Я думаю, вам нужно обновить представление списка в javascript, чтобы получить форматирование:

С http://jquerymobile.com/test/docs/lists/docs-lists.html: $('#mylist').listview('refresh');