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()
                             ...
    });    
});

以下是向DOM动态添加HTML然后让jQuery Mobile在HTML中初始化小部件的演示：http://jsfiddle.net/csKtX/

另外，请确保将data-role="button"（等）添加到窗口小部件，以便jQuery Mobile知道如何初始化它们（我的代码假设您已完成此操作）。

Answer 2

我最近和jQuery有类似的经历，其中动态内容没有在Firefox中呈现。我让我的网站工作，我认为问题可能在于这一行： $（ '＃更多'）的html（数据）;

尝试用innerHTML方法替换它，看看是否有效。

干杯

JqueryMobile动态css无法渲染

2 个答案: