jquery-mobile css 不适用于使用 javascript 生成的 html

Question

我从 JSON 文件中获取数据，然后在 jquerymobile 结构之后使用带有数据角色等的 html 结构来显示它......这是我如何获取数据并显示它的代码：

$(document).on('pageinit', function(){
    $.getJSON("http://danielvivancos.com/edu/wordpress/?json=get_posts&post_type=product", function(data){
    var html = "";
        $.each(data.posts, function(index, d){
        html = html + "<li><a href='" + d.slug + "' data-transition='slidedown'><img src='" + d.thumbnail_images.thumbnail.url + "' /><h3 class='ui-li-heading'> Menu" + index + "</h3></a></li>";
        });
        html= "<ul data-role='listview' data-inset='true'>"+ html + "</ul>";
        $(html).appendTo(".choice_list");


    }).error(function(jqXHR, textStatus, errorThrown){ /* assign handler */
        /* alert(jqXHR.responseText) */
        alert("error occurred!");
    });
});

HTML 中的输出如下：

<li><a href="link1.HTML" data-transition="slidedown"> <img src="source1"><h3> Menu1</h3></a></li>

<li><a href="link2.HTML" data-transition="slidedown"> <img src="source2"><h3> Menu2</h3></a></li>

<li><a href="link3.HTML" data-transition="slidedown"> <img src="source3"><h3> Menu3</h3></a></li>

但我的问题是，即使我按照 jquerymobile 所说的方式显示内容，但应该应用的样式却不是。我的意思是 jquerymobile 脚本添加的所有类都没有添加到我用 javascript 生成的 html 中。任何人都知道我该如何解决？如何保留 jquerymobile 的样式？ 非常感谢您！

回答：

 $(html).appendTo(".choice_list").listview(); 

Answer 1

来自 jQuery 移动文档：

当用户单击 jQuery Mobile 驱动的站点中的链接时， 导航系统的默认行为是使用该链接的 href 制定一个 Ajax 请求（而不是允许浏览器的 请求具有完整页面加载的 href 的默认链接行为）。 当那个 Ajax 请求发出时，框架将收到它的全部 文本内容，但它只会注入响应的内容 body 元素（或者更具体地说是 data-role="page" 元素，如果 它已提供），这意味着不会使用页面头部的任何内容 （页面标题除外，它是专门获取的）。

这意味着任何脚本和样式都引用了页面的头部 当通过 Ajax 加载页面时不会产生任何影响，但它们会 如果页面通过 HTTP 正常请求，则执行。

Reference

创建与刷新：一个重要的区别

请注意，create 事件之间有一个重要区别 和某些小部件具有的刷新方法。 create 事件很合适 用于增强包含一个或多个小部件的原始标记。这 refresh 方法应该用于现有的（已经增强的）小部件 已以编程方式操作并需要更新 UI 匹配。

例如，如果您有一个页面，其中动态附加了一个新的 页面创建后具有 data-role=listview 属性的无序列表， 在该列表的父元素上触发 create 会改变它 进入列表视图样式的小部件。如果有更多的列表项 以编程方式添加，调用列表视图的刷新方法将 仅将那些新列表项更新为增强状态并离开 现有的列表项保持不变。

你想在加载后.trigger("create")。

Answer 2

您可能需要在您的列表视图中调用refresh：

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

参考：http://jquerymobile.com/demos/1.2.1/docs/lists/lists-methods.html

http://jquerymobile.com/demos/1.2.1/docs/lists/docs-lists.html

Answer 3

$(html).appendTo(".choice_list").listview();