如何在 JQM 中以编程方式创建列表视图答案

【问题标题】：How to programmatically create listview in JQM如何在 JQM 中以编程方式创建列表视图
【发布时间】：2013-03-20 05:29:23
【问题描述】：

我有一个来自 ajax 的数组，我需要创建 jQuery Mobile Listview。我没有找到这个方法，所以可能吗？

【问题讨论】：

标签： html jquery-mobile jquery jquery-mobile-listview

【解决方案1】：

这是一个工作示例：http://jsfiddle.net/Gajotres/SS7vJ/

还有一个数组示例：http://jsfiddle.net/Gajotres/yHHWQ/

$(document).on('pagebeforeshow', '#index', function(){       
    $('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
    $('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview');
    $('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview');
    $('#test-listview').listview().listview('refresh');
});

另外不要忘记调用 .listview( 两次，第一次没有刷新参数，第二次使用刷新参数。没有它你会收到这个错误：

无法在初始化之前调用列表视图上的方法

如果您想了解更多关于 jQuery mobile 如何处理动态添加的内容及其标记的信息，请查看此ARTICLE，为了透明，这是我的个人博客，或者找到它HERE。

【讨论】：

也找到了其他方法，貌似.append(sites).trigger('create');
我建议您不要使用 trigger('create') 因为它是资源繁重的。虽然 listview('refresh') 将只设置 listview 的样式，但 trigger('create') 将重新设置整个页面内容的样式。在我的答案末尾的链接中阅读相关内容。