PhoneGap jQueryMobile 列表视图未在辅助页面上正确显示答案

【问题标题】：PhoneGap jQueryMobile listview not displaying correctly on secondary pagesPhoneGap jQueryMobile 列表视图未在辅助页面上正确显示
【发布时间】：2013-01-29 07:34:40
【问题描述】：

我正在使用 jQueryMobile 开发一个 PhoneGap 应用程序。我的问题是listview 没有在相册页面上正确显示，而是在主页上。我对两者都使用相同的data-theme。

问题：为什么第二页的listview显示不正确（背景、字体、图标）？

研究：

专辑页面代码

    <div data-role="page" id="albums" data-url="albums" data-theme="a">
        <div data-role="header">
            <a href="#home" data-role="button" data-corners="true" data-shadow="true">Back</a>
            <h1>Albums</h1>
            <button id="albums-refresh">Refresh</button>
        </div>
        <div data-role="content">
            <ul id="albums-content" data-role="listview" data-inset="true"></ul>
        </div>
    </div>

动态填充listview的jQuery函数

Load: function () {
    $("#albums-content").empty();
    $.ajax({type: "GET", url: "https://itunes.apple.com/lookup?id=356541460&entity=album", data: {get_param: "results"}, dataType: "json", success: function (data) {$.each(data, function (index, element) {$.each(this, function (index, element) {if (element.wrapperType === "collection") {$("#albums-content").append("<li><a id='a-" + index + "' href='#album-details'><img src='" + element.artworkUrl100 + "' />" + element.collectionName + "</a>"); $("#a-" + index).bind('click', function (index) {Albums.AlbumID = index; }); }}); }); }});
}

PhoneGap 调试：

专辑页面 请注意，紫色背景和橙色文本不存在，但您可以在第二张专辑下方看到listview 阴影的微弱暗示。

【问题讨论】：

标签： jquery listview cordova jquery-mobile

【解决方案1】：

这个问题有一个简单的解决方案（下次进一步查看 jQM 文档）。

当在 jQuery Mobile 列表视图中动态创建对象时，它的标记也需要像这样增强：

$('#some-listview').listview('refresh');

基本上每次将动态内容添加到 jQuery Mobile 页面时，它都需要手动增强。如果您想了解有关此主题的更多信息，请查看我的博客 ARTICLE。或者你可以找到它HERE。

【讨论】：

你们都发布了完全相同的东西！谢谢，我完全忘记调用刷新了。

【解决方案2】：

您必须确保的一件事：将所有内容附加到列表视图后，您必须添加以下代码

$("ul#albums-content").listview("refresh");

这是为了更新样式并创建添加的任何嵌套列表。

【讨论】：

你们都发布了完全相同的内容！谢谢，我完全忘记了调用刷新。

【解决方案3】：

在您的 ajax 调用的成功函数中，您需要调用 listview 元素的 refresh 方法才能正确更新和呈现 UI。

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html

【讨论】：

你们都发布了完全相同的东西！谢谢，我完全忘记调用刷新了。