Jquery mobile 强制jQuery Mobile重新评估动态插入内容的样式/主题

目标：通过

$加载HTML内容。ajax

，将其插入DOM，让jQuery Mobile应用主题样式

问题：内容被插入，但缺少jQuery移动主题

代码：

$.ajax({
    ...
    success: function(html) {
        $('#container').append(html);
        $('#page').page('refresh', true);
    }
});

返回的HTML包括jQM应该设置的

数据角色
标记

<a data-role="button">Do Something</a>



对于其他正在搜索此问题答案的人，截至2011年6月9日，jQuery移动团队已经在一个开发分支中实现了此功能。根据这一问题，它将在该庄园发挥作用：

$（“.ui内容”）.append（…大量HTML…）.trigger（“增强”）

在jQuery移动框架alpha4.1及更早版本中，这是通过使用
.page（）
方法完成的

示例表明两者没有太大区别：

$( ... lots of HTML ...).appendTo(".ui-content").page();

更多信息：

为什么引入新方法（见T.Stone的答案）
.page（）
编写时假设DOM元素以前没有增强

为了实现解耦，tje jQuery移动团队引入了事件驱动增强功能，它不仅允许触发事件，而且还可以在不修改JQM.page方法的代码的情况下为新的
数据角色创建新的小部件。
刚刚得到一个类似问题的答案，请尝试使用

.trigger("create")

在获取添加到的内容的元素上

请参见此处：
如果您使用ajax方法加载到内容中，我就是这样让样式和jquery移动功能发挥作用的。这与上面的建议基本相同，但对于一些人来说，你可能喜欢看到一个更完整的例子

代码如下：

$.ajax({
url: 'url.php',
success: function(data) {    
$("#div").html(data).trigger('create');
}
});

如果向listview添加项目，则需要对其调用refresh（）方法来更新样式并创建添加的任何嵌套列表。例如：

$('#mylist').listview('refresh');

如果需要呈现动态页面，请阅读：“”。本文中的示例代码：

// 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 );
    }
}

//加载特定类别的数据，基于
//传入的URL。为中的项目生成标记
//类别，将其插入到嵌入的页面中，然后
//该页是当前活动页。
函数showCategory（urlObj，选项）
{
var categoryName=urlObj.hash.replace（/.*category=/，“”），
//获取表示所选类别的对象
//注意，在这一点上，我们可以
//而是发出一个ajax请求来获取数据，但是
//就本示例而言，它已在内存中。
类别=类别数据[类别名称]，
//我们用来显示内容的页面已经存在
//DOM。我们将要编写的页面的id
//在“？”之前的哈希中指定了到的内容。
pageSelector=urlObj.hash.replace（/\？*$/，“”）；
如果（类别）{
//获取我们要将内容转储到的页面。
变量$page=$（页面选择器），
//获取页面的标题。
$header=$page.children（“：jqmData（role=header）”），
//获取页面的内容区域元素。
$content=$page.children（“：jqmData（role=content）”），
//我们将要注入内容的标记
//页面的区域。
markup=“”+category.description+”
，
//此类别的项目数组。
cItems=类别.items，
//类别中的项目数。
numItems=cItems.length；
//为类别中的每个项目生成列表项目
//并将其添加到我们的标记中。
对于（变量i=0；i”+cItems[i]。名称+””；
}
标记+=“
”；
//在标题中找到h1元素并注入
//这是一个很好的分类。
$header.find（“h1”）.html（category.name）；
//将类别项目标记插入到内容元素中。
$content.html（标记）；
//页面被惰性地增强。我们在页面上调用page（）
//元素，以确保在我们
//尝试增强我们刚刚注入的listview标记。
//对page（）的后续调用将被忽略，因为页面/小部件
//只能增强一次。
$page.page（）；
//增强我们刚刚注入的listview。
$content.find（“：jqmData（role=listview）”）.listview（）；
//我们不需要刚修改的页面的数据url
//要成为显示在浏览器位置字段中的url，
//因此，将dataUrl选项设置为类别的URL
//我们刚上船。
options.dataUrl=urlObj.href；
//现在调用changePage（）并告诉它切换到
//我们刚刚修改的页面。
$.mobile.changePage（$page，选项）；
}
}
$（'.selector'）。触发器（'create'）似乎是最好的方法，请参阅下面的官方常见问题解答：

作为对所提供答案的更新。从v1.45开始，您可以选择内容并使用
.enhanceWithin（）
增强子元素

这太早了。我知道你想成为第一个发布这篇文章的人，但是代码还没有发布，如果你没有提供关于具有此功能的发布的任何信息，你可能会造成很多混乱。这对我来说是有效的，截至发表此评论的日期，where.page（）我必须提升一个级别才能让它正常工作，所以我调用了我注入的listview上方div上的触发器。谢谢你，我花了半天的时间来摆弄.listview，但都没有成功。这是可行的，但已经成功了。使用.enhanceWithin（）intstead。这是我见过的唯一一个选择器不是$（'#myListView'）、bu的示例