0

我的文档中有 2 页。活动页面显示一个列表，单击该列表，我显示第二页。第二页的contentdiv 是动态添加的，还有一些 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 将动态内容添加到辅助页面并在同一页面上显示我想多次显示的内容？

4

2 回答 2

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 知道初始化它们（我上面的代码假设您已经完成了此操作）。

于 2012-04-19T21:10:27.380 回答
0

我最近在 jQuery 中也有类似的经历，动态内容没有在 Firefox 中呈现。我让我的网站正常工作，我认为问题可能出在这一行： $('#more').html(data);

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

干杯

于 2012-04-19T21:21:38.443 回答