jQuery移动在动态添加内容后不应用样式

Question

我知道这个问题出现在几个地方(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>

谢谢你的帮助

大喇叭

Answer 1

尝试对包含新内容的元素调用.trigger("create")。

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

编辑：从jQuery Mobile1.4，.trigger('create') is deprecated开始，你应该使用.enhanceWithin()。(感谢John Mc的提醒。)

Answer 2

这对我的列表视图很有效。

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

您还可以刷新可折叠的

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

Answer 3

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

刷新未捕获的异常:无法在初始化之前调用listview上的方法；尝试调用方法“”

“”

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

$("ul").listview();

在ajax回调函数的末尾。

这让我的一切工作得很好。希望能有所帮助。