强制jQuery Mobile重新评估dynamic插入内容的样式/主题
目标：通过$.ajax加载HTML内容，将其插入到DOM中，让jQuery Mobile应用主题样式。
问题：内容被插入，但缺lessjQuery Mobile主题。
码：
$.ajax({ ... success: function(html) { $('#container').append(html); $('#page').page('refresh', true); } });
返回的HTML包含jQM应该devise的data-role标签…
<a data-role="button">Do Something</a>
而不是应用样式应该，我得到以下错误：
未被捕获的exception：对于页面小部件实例没有这种方法“刷新”
以上代码使用http://code.jquery.com/mobile/latest/jquery.mobile.js进行testing
类似的问题，带来了我上面的错误消息：
始终使用适当的jQuery Mobile样式更新页面
JQM（jQueryMobile）dynamic添加的元素不能正确显示，CSS不适用
jQuery Mobile – dynamic创build表单元素
刚刚得到了类似问题的答案，请尝试使用
.trigger("create")
在获取内容添加到的元素上。
请参阅： jQuery Mobile在dynamic添加内容后不应用样式
如果将项目添加到列表视图，则需要调用其上的refresh（）方法来更新样式并创build添加的任何嵌套列表。 例如：
$('#mylist').listview('refresh');
如果您需要呈现dynamic页面，请阅读：“ jQuery Mobile和dynamic页面生成 ”。 来自这篇文章的示例代码：
// Load the data for a specific category, based on // the URL passed in. Generate markup for the items in the // category, inject it into an embedded page, and then make // that page the current active page. function showCategory( urlObj, options ) { var categoryName = urlObj.hash.replace( /.*category=/, "" ), // Get the object that represents the category we // are interested in. Note, that at this point we could // instead fire off an ajax request to fetch the data, but // for the purposes of this sample, it's already in memory. category = categoryData[ categoryName ], // The pages we use to display our content are already in // the DOM. The id of the page we are going to write our // content into is specified in the hash before the '?'. pageSelector = urlObj.hash.replace( /\?.*$/, "" ); if ( category ) { // Get the page we are going to dump our content into. var $page = $( pageSelector ), // Get the header for the page. $header = $page.children( ":jqmData(role=header)" ), // Get the content area element for the page. $content = $page.children( ":jqmData(role=content)" ), // The markup we are going to inject into the content // area of the page. markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>", // The array of items for this category. cItems = category.items, // The number of items in the category. numItems = cItems.length; // Generate a list item for each item in the category // and add it to our markup. for ( var i = 0; i < numItems; i++ ) { markup += "<li>" + cItems[i].name + "</li>"; } markup += "</ul>"; // Find the h1 element in our header and inject the name of // the category into it. $header.find( "h1" ).html( category.name ); // Inject the category items markup into the content element. $content.html( markup ); // Pages are lazily enhanced. We call page() on the page // element to make sure it is always enhanced before we // attempt to enhance the listview markup we just injected. // Subsequent calls to page() are ignored since a page/widget // can only be enhanced once. $page.page(); // Enhance the listview we just injected. $content.find( ":jqmData(role=listview)" ).listview(); // We don't want the data-url of the page we just modified // to be the url that shows up in the browser's location field, // so set the dataUrl option to the URL for the category // we just loaded. options.dataUrl = urlObj.href; // Now call changePage() and tell it to switch to // the page we just modified. $.mobile.changePage( $page, options ); } }
如果您使用ajax方法加载内容，这是我的样式和jQuery的移动function工作。 这和上面的build议几乎一样，但对于一些你可能喜欢看到更完整的例子的人来说。
这里是代码：
$.ajax({ url: 'url.php', success: function(data) { $("#div").html(data).trigger('create'); } });
作为提供的答案的更新。 从v1.45开始，您可以select您的内容并使用.enhanceWithin()来增强子元素。
在jQuery Mobile Framework alpha4.1及更早版本中，这是通过使用.page .page()方法完成的。
示例显示没有太大的区别：
$( ... lots of HTML ...).appendTo(".ui-content").page();
更多信息： http : //jquerymobiledictionary.dyndns.org/faq.html
为什么新方法（见T. Stone的答案）被引入？ .page .page()是用一个assumprion写的，DOM元素之前没有增强。
为了解耦，jQuery Mobile团队引入了事件驱动的增强function，不仅可以触发事件，还可以在不修改JQM的.page方法的代码的情况下为新的data-role创build新的小部件。
$('.selector').trigger('create'); 似乎是最好的办法，请参阅下面的官方常见问题：
http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php
对于寻找答案的其他人来说，截至2011年6月9日，jQuery移动团队已经在开发分支中实现了这个function。 根据这个问题，它将在这个庄园工作：
$(".ui-content").append( ... lots of HTML ...).trigger( "enhance" );
