Question

目标：通过$.ajax加载HTML内容，将其插入DOM，让jQuery Mobile为其应用主题样式。

问题：内容已插入，但缺少jQuery Mobile主题。

代码：

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

返回的HTML包含data-role个标签，jQM应该设置样式......

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

我没有应用类似的样式，而是出现以下错误：

未捕获的异常：没有这样的方法页面小部件实例的“刷新”

以上代码使用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

jQuery Mobile - Dynamically creating form elements

Answer 1

刚刚得到了类似问题的答案，请尝试使用

.trigger("create")

在获取内容的元素上。

见这里：jQuery Mobile does not apply styles after dynamically adding content

Answer 2

如果将项目添加到列表视图，则需要在其上调用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 );
    }
}

Answer 3

如果您正在使用ajax方法加载内容，这就是我使用样式和jquery移动功能的方法。它与上面的建议几乎相同，但对于某些人，您可能希望看到更完整的示例。

以下是代码：

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

Answer 4

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

http://api.jquerymobile.com/enhanceWithin/

Answer 5

在jQuery Mobile Framework alpha4.1及更早版本中，这是通过使用.page()方法完成的。

示例显示没有太大区别：

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

更多信息：http://jquerymobiledictionary.dyndns.org/faq.html

为什么采用新的方式（参见T. Stone的答案）？编写.page()时假设DOM元素之前未得到增强。

为了解耦，jQuery Mobile团队引入了事件驱动的增强功能，不仅可以触发事件，还可以在不修改JQM的代码的情况下为新的data-role创建新的小部件。方法

Answer 6

$('.selector').trigger('create');似乎是最好的方法，请参阅下面的官方常见问题解答：

http://view.jquerymobile.com/master/demos/faq/injected-content-is-not-enhanced.php

Answer 7

对于其他寻找答案的人来说，截至2011年6月9日，jQuery移动团队已在开发分支中实现了此功能。根据这个问题，它将在这个庄园工作：

$(".ui-content").append( ... lots of HTML ...).trigger( "enhance" );

https://github.com/jquery/jquery-mobile/issues/1799

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

7 个答案: