ajax 动态添加内容后jQuery Mobile不应用样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7999436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile does not apply styles after dynamically adding content
提问by Larsi
I know this questions appear several places (Forcing jQuery Mobile to re-evaluate styles/theme on dynamically inserted content) but not with an answer that is working for me.
我知道这个问题出现在几个地方（强制 jQuery Mobile 重新评估动态插入内容的样式/主题）但没有对我有用的答案。
I'm loading some content using ajax, and inserting it into a div like this:
我正在使用 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();
}
});
I've tried setting the targetRefresh on both the target I'm adding the html to, and on the page, but with no luck. The conent is inserted, but styles not applied.
我已经尝试在我添加 html 的目标和页面上设置 targetRefresh，但没有运气。内容已插入，但未应用样式。
I've also tried
我也试过
.trigger("enhance")
Any idea what to do?
知道该怎么做吗？
The html that inserted are a bunch of these:
插入的 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>
Thanks for any help
谢谢你的帮助
Larsi
拉西
回答by Phil
Try calling .trigger("create")on the element with the new content.
尝试.trigger("create")使用新内容调用元素。
According to the jQuery Mobile docs, "The createevent is suited for enhancing raw markup that contains one or more widgets."
根据jQuery Mobile 文档，“该create事件适用于增强包含一个或多个小部件的原始标记。”
EDIT: As of jQuery Mobile 1.4, .trigger('create')is deprecated, and you should use .enhanceWithin()instead. (Thanks to John Mc for the heads-up.)
编辑：从 jQuery Mobile 1.4 开始，.trigger('create')已弃用，您应该.enhanceWithin()改用。（感谢 John Mc 的提醒。）
回答by Sagar Gala
This worked for me for the list view
这对我的列表视图有用
$('ul').listview('refresh');
Also you can refresh the collapsible
您也可以刷新可折叠
$('#element').collapsibleset('refresh')
回答by Christopher K?ck
When I tried the solutions above I got an error message in Firebug
当我尝试上述解决方案时，我在 Firebug 中收到一条错误消息
uncaught exception: cannot call methods on listview prior to initialization; attempted to call method 'refresh'
未捕获的异常：无法在初始化之前调用 listview 上的方法；试图调用方法“刷新”
I found a fix for this though, instead of calling .trigger("create")after the append of the new elements I called
不过，我找到了解决方法，而不是.trigger("create")在我调用的新元素的追加之后调用
$("ul").listview();
at the end of the ajax callback function.
在ajax回调函数的末尾。
This got everything working nicely for me. Hope it helps.
这让一切对我来说都很好。希望能帮助到你。
回答by MannyC
For those who missed it above, to re-apply JQM styles after adding content dynamically, do this:
对于上面错过的人，要在动态添加内容后重新应用 JQM 样式，请执行以下操作：
$('.myelement').html( myHtmlStr ).enhanceWithin();
