JQuery Mobile не применяет стили после динамического добавления контента

Я знаю, что эти вопросы появляются в нескольких местах (Принуждение jQuery Mobile для переоценки стилей/темы на динамически вставленном содержимом), но не с ответом, который работает на меня.

Я загружаю некоторый контент с помощью ajax и вставляю его в div следующим образом:

       $.ajax({
            url: "../Services/CalendarService.cshtml?service=true",
            cache: false,
            success: function (data) {

                data = $.parseJSON(data);
                var s = $("#user_tmpl").html();
                var s1 = tmpl(s, data);

                $("#target").html(s1);
                $("#targetRefresh").page();
            }
        });

Я попытался установить targetRefresh как на цель, которую я добавляю html, так и на страницу, но не повезло. Конец вставлен, но стили не применяются.

Я также пробовал

.trigger("enhance")

Любая идея, что делать?

Вставляемый html - это куча:

<div data-theme="e" data-collapsed="true" data-role="collapsible">         <h3>MyOwner2AA</h3>         <p>MyDescription</p>         <p>/Date(1320339836735)/</p>         <p>MyOwner</p>         <i></i>     </div>

Спасибо за любую помощь

Larsi

Ответы

Ответ 1

Попробуйте вызвать .trigger("create") для элемента с новым контентом.

Согласно jQuery Mobile docs, "Событие create подходит для улучшения сырой разметки, содержащей один или несколько виджетов."

EDIT: с jQuery Mobile 1.4, .trigger('create') устарел, и вы должны использовать .enhanceWithin() вместо. (Спасибо Джону Максу за хедз-ап.)

Ответ 2

Это работало для меня для просмотра списка

$('ul').listview('refresh');

Также вы можете обновить складные

$('#element').collapsibleset('refresh')

Ответ 3

Когда я попробовал решения выше, я получил сообщение об ошибке в Firebug

uncaught exception: не может вызывать методы в представлении списка до инициализации; попытался вызвать метод 'refresh'

Я нашел исправление для этого, но вместо вызова .trigger("create") после добавления новых элементов, которые я назвал

$("ul").listview();

в конце функции обратного вызова ajax.

У меня все хорошо работает для меня. Надеюсь, поможет.

Ответ 4

Для тех, кто пропустил это выше, для повторного применения стилей JQM после динамического добавления контента сделайте следующее:

$('.myelement').html( myHtmlStr ).enhanceWithin();