目标:通过$.ajax
加载HTML内容,将其插入到DOM中,让jQuery应用主题样式。
移动端问题:内容被插入,但缺乏jQuery 主题。
代码:
$.ajax({
...
success: function(html) {
$('#container').append(html);
$('#page').page('refresh', true);
}
});
返回的超文本标记语言包括jQM应该样式化的data-role
标记...
<a data-role="button">Do Something</a>
我没有像应该的那样应用样式,而是得到了以下错误:
未捕获异常:页面小部件实例没有这样的方法'refresh‘
以上代码使用http://code.jquery.com/mobile/latest/jquery.mobile.js
进行了测试
类似的问题使我看到了上面的错误消息:
Consistently update page with appropriate jQuery Mobile styles
JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not applied
发布于 2011-11-04 02:00:07
刚刚得到了类似问题的答案,请尝试使用
.trigger("create")
将内容添加到的元素上。
查看此处:jQuery Mobile does not apply styles after dynamically adding content
发布于 2013-02-05 18:55:59
如果将项添加到列表视图中,则需要对其调用refresh()方法来更新样式并创建所添加的任何嵌套列表。例如:
$('#mylist').listview('refresh');
如果你需要渲染一个动态页面,请阅读:“jQuery Mobile and Dynamic Page Generation”。本文中的示例代码:
// 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 );
}
}
发布于 2012-04-18 01:18:19
如果您使用ajax方法加载到内容中,这就是我让样式和jquery移动功能工作的方式。这与上面的建议基本相同,但对于某些人来说,您可能希望看到更完整的示例。
代码如下:
$.ajax({
url: 'url.php',
success: function(data) {
$("#div").html(data).trigger('create');
}
});
https://stackoverflow.com/questions/6297470
复制相似问题