phonegap jquerymobile 问题：动态生成列表项时丢失样式答案

【问题标题】：phonegap jquerymobile issue: lost style when dynamically generating list itemsphonegap jquerymobile 问题：动态生成列表项时丢失样式
【发布时间】：2012-04-12 22:37:04
【问题描述】：

我正在尝试从数据库动态生成列表。可以检索结果，但是 jquerymobile 样式和 data-role 属性似乎丢失了。我看到了一个丑陋的列表，而不是渲染得很好的列表：

我尝试使用最简单的列表项来重现它：

在我的 index.html 中，我有：

<ul data-role="listview" data-theme="d" data-divider-theme="d" data-inset="true" id="thisweekexpenselist"></ul>

在 javascript 文件中，我有

function getExpenselist_success(tx, results) {
$('#busy').hide();
var len = results.rows.length;
for (var i=0; i<len; i++) {
    var expense = results.rows.item(i);
    $('#thisweekexpenselist').append('<li>Test Simplest</li>'); 
}   
db = null;

}

它根本无法正确渲染。

【问题讨论】：

为了让您了解它的外观，请参见这张图片：dl.dropbox.com/u/25220312/jquery.PNG。以上是动态生成的。忘记中间的两个列表项，最后一项“Test Simplest”是硬编码到列表中的。

标签： jquery-mobile cordova html-lists

【解决方案1】：

尝试在 getExpenselist_success() 函数的末尾调用$('#thisweekexpenselist').listview('refresh');。

【讨论】：

因为您在 Jquery Mobile 之后附加的数据正在格式化您的列表。该方法重新创建列表视图。

【解决方案2】：

这有帮助：

$(document).bind('pagechange', function() {
  $('.ui-page-active .ui-listview').listview('refresh');
});

【讨论】：