JQuery Mobile не применяется

Question

У меня возникли некоторые проблемы с JQueryMobile, потому что я хочу реализовать некоторые виджеты, но темы и цвет виджетов не реализованы должным образом.

Вот фотография, чтобы показать, что происходит:

И правильный виджет, например, будет таким:

Если я добавляю виджеты jquerymobile динамически, то тема добавляется не очень хорошо, но если html уже находится в файле (динамически не добавляется в javascript), тема выглядит хорошо. Вот код, который я использую для добавления виджетов:

function cesta_insert_html(){
    var cesta_bought = $('body').data('cesta_list');
    cesta_bought.forEach(function(element, index){
        image = get_product_info(element[0].id, 'data' + $('body').data('clicked_listview_item'));
        $('#cesta_view').append('<div data-role="collapsible-set" id="collapsible" data-theme="a" data-content-theme="c"><div data-role="collapsible" data-collapsed="false"><h3 id="title_collapsible">'+image.pname+'</h3><center><div id=image_cesta><img src=data:imajpeg;base64,'+image.pimage+' alt="image"></div><div data-role="fieldcontain"><fieldset data-role="controlgroup"><input type="range" class="slider" name="slider" value="0" min="0" max="100" data-highlight="false"></fieldset></div></center><div class="ui-grid-a"><div class="ui-block-a"><a id=SaveChangesCesta data-role="button" type="submit" >Guardar cambios</a></div><div class="ui-block-b"><a id="DeleteCesta" type="submit" >Eliminar de cesta</a></div></div></div></div><br><br>');
    });
}

Спасибо!

Answer 1

Рабочий пример: http://jsfiddle.net/Gajotres/6nG2n/

Вы комбинируете несколько разных виджетов, чтобы улучшить их разметку, вам нужно запустить триггер ('create').

Подробнее об этом читайте в моем другом ответе: jQuery Mobile: разметка Улучшение динамически добавляемого контента

$('[data-role="content"]').append('<div data-role="collapsible-set" id="collapsible" data-theme="a" data-content-theme="c"><div data-role="collapsible" data-collapsed="false"><h3 id="title_collapsible">Image</h3><center><div id=image_cesta><img src=data:imajpeg;base64,Image alt="image"></div><div data-role="fieldcontain"><fieldset data-role="controlgroup"><input type="range" class="slider" name="slider" value="0" min="0" max="100" data-highlight="false"></fieldset></div></center><div class="ui-grid-a"><div class="ui-block-a"><a id=SaveChangesCesta data-role="button" type="submit" >Guardar cambios</a></div><div class="ui-block-b"><a id="DeleteCesta" type="submit" >Eliminar de cesta</a></div></div></div></div><br><br>');   
$('#index').trigger('create');

Answer 2

Посмотрите на подобные вопросы: jQuery Mobile, динамически создающий разборный набор с помощью ajax, не применяет стилизацию. Динамическое добавление разборных элементов. Динамическое добавление разборных элементов.

После динамического добавления чего-либо в JQuery mobile вы можете применить разметку, вызвав метод create или refresh.

Попробуйте позвонить

$("collapsible").collapsible()

после добавления разборного для его инициализации.