JqueryMobile动态css不渲染

Question

我的文档中有 2 页。活动页面显示一个列表，单击该列表，我显示第二页。第二个页面的 content div 是动态添加的，以及一些自定义的 JS 中的 css。下面的 Java 脚本完成了这项工作，但我无法获得 css 渲染。

   $("#showmore").live("click", function(event, param1){       
        getUrl = $(this).attr('data-href');
        $.post(getUrl, function(data){  
            $.mobile.hidePageLoadingMsg(); 
            $('#more').html(data);
            $.mobile.activePage.page().trigger('refresh');
        });    
    });    

我也试过$.mobile.activePage.trigger('create'); 。这可行，但我来回翻阅两页。但是当我第二次点击列表时，内容根本没有被渲染。它是一个只有页眉的空白页！

任何人都可以分享您的专业知识，了解我如何使用 css 将动态内容添加到辅助页面并在同一页面上显示我想多次显示的内容？

Answer 1

您只需在要替换的元素上调用.trigger('create')：

$("#showmore").live("click", function(event, param1){       
    var getUrl = $(this).attr('data-href');//don't unnecessarily create global vars
    $.post(getUrl, function(data){  
        $.mobile.hidePageLoadingMsg();

        //since you are only changing this HTML, you only have to initialize this HTML
        $('#more').html(data).trigger('create');
    });    
});

我遇到过这种情况似乎不起作用，但我成功地分别初始化了每种类型的小部件，如下所示：

$("#showmore").live("click", function(event, param1){       
    var getUrl = $(this).attr('data-href');//don't unnecessarily create global vars
    $.post(getUrl, function(data){  
        $.mobile.hidePageLoadingMsg();

        $('#more').html(data).find('a[data-role="button"]').button().end()
                             .find('ul[data-role="listview"], ol[data-role="listview"]').listview().end()
                             ...
    });    
});

这是一个动态添加 HTML 到 DOM 的演示，然后让 jQuery Mobile 初始化 HTML 中的小部件：http://jsfiddle.net/csKtX/

另外，请确保您将 data-role="button"（等）添加到小部件，以便 jQuery Mobile 知道初始化它们（我上面的代码假设您已经这样做了）。

Answer 2

我最近在使用 jQuery 时也遇到过类似的情况，即动态内容无法在 Firefox 中呈现。我让我的网站正常工作，我认为问题可能出在这条线上： $('#more').html(数据);

尝试用 innerHTML 方法替换它，看看是否可行。

干杯