jQuery Mobile 在动态添加内容后不应用样式答案

【问题标题】：jQuery Mobile does not apply styles after dynamically adding contentjQuery Mobile 在动态添加内容后不应用样式
【发布时间】：2011-12-21 09:58:51
【问题描述】：

我知道这个问题出现在好几个地方 (Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content)，但没有适合我的答案。

我正在使用 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();
            }
        });

我尝试在要添加 html 的目标和页面上设置 targetRefresh，但没有成功。内容已插入，但未应用样式。

我也试过

.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>

感谢您的帮助

拉西

【问题讨论】：

标签： ajax jquery-mobile

【解决方案1】：

尝试在具有新内容的元素上调用.trigger("create")。

根据jQuery Mobile docs，“create 事件适用于增强包含一个或多个小部件的原始标记。”

编辑：从 jQuery Mobile 1.4 开始，.trigger('create')is deprecated，您应该改用 .enhanceWithin()。（感谢 John Mc 的提醒。）

【讨论】：

是的！那成功了！也感谢您指出文档。
这对我不起作用。我尝试使用 1.0 stable 和 nightly build。有什么建议？我尝试过使用 .page()、.page("refresh")、.trigger("create")。从来没有任何错误，但没有应用样式。
@snipe：我认为您需要确保在 DOM 上插入新内容时触发。
@snipe - 尝试在父元素上触发触发器。“create”事件。
@snipe 我遇到了同样的问题，终于可以用这个 sn-p $('#id').page("destroy").page(); 解决它。不确定此解决方案对性能的影响是什么，但至少它有效。

【解决方案2】：

这对我来说适用于列表视图

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

你也可以刷新折叠

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

【讨论】：

【解决方案3】：

当我尝试上述解决方案时，我在 Firebug 中收到一条错误消息

未捕获的异常：无法在初始化之前调用列表视图上的方法；试图调用方法“刷新”

我找到了解决这个问题的方法，而不是在我调用的新元素追加后调用 .trigger("create")

$("ul").listview();

在 ajax 回调函数的末尾。

这对我来说一切正常。希望能帮助到你。

【讨论】：

【解决方案4】：

对于上面错过的那些，要在动态添加内容后重新应用 JQM 样式，请执行以下操作：

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

【讨论】：