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

Question

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

Iзагружаю некоторый контент, используя 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>

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

Ларси

Answer 1

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

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

РЕДАКТИРОВАТЬ : Начиная с jQuery Mobile 1.4, .trigger('create') устарел , и вместо него следует использовать .enhanceWithin(). (Спасибо Джону Маку за хедз-ап.)

Answer 2

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

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

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

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

Answer 3

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

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

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

$("ul").listview();

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

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

Answer 4

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

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