4

我从 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();
4

3 回答 3

2

来自 jQuery 移动文档：

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

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

参考

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

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

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

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

于 2013-08-27T16:19:21.910 回答
1

您可能需要调用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

于 2013-08-27T16:13:41.503 回答
0 
$(html).appendTo(".choice_list").listview();
于 2013-08-27T17:45:30.323 回答