Question

这是我的listview元素：

<ul data-role="listview" data-inset="true" id="acceptedContent" data-theme="c">
</ul>

创建过程这是第一次工作正常，列表视图看起来像它应该看起来并且似乎工作得很好：

$('#acceptedContent').append('<li><a href="#Info' + results.rows.item(i).infoID + '" data-transition="flow">' + results.rows.item(i).Info + '</a></li>');

然后我调用它来清空div，它可以工作并清除div：

$('#acceptedContent').empty();

使用ajax帖子刷新页面，当我获取数据时，我将其读入数据库然后重建页面。此列表是唯一丢失格式的页面。然后我调用我第一次构建页面的相同功能。

重建部分数据已填充，但我放弃了格式

$('#acceptedContent').append('<li><a href="#Info' + results.rows.item(i).infoID + '" data-transition="flow">' + results.rows.item(i).Info + '</a></li>');

任何建议都会非常感谢我一直在寻找感觉就好像想要解决这个问题的日子。

我已经尝试了下面的执行顺序，但没有任何工作，我在重建部分进行追加调用之后刷新了以下listview：

$("#acceptedContent").listview('refresh');
$("#acceptedContent ul").listview('refresh');

感谢您的帮助。

Answer 1

好的，这是你怎么做的：

你有一个像这样的列表视图：

<ul data-role="listview" data-inset="true" id="acceptedContent" data-theme="c">
</ul>

您已经获得了一些数据，并将其格式化为<li/>。您可以在变量中收集li html而不是追加多次，只需添加一次：

var li = "";
//your loop, $.each, for or for..in
li += '<li><a href="#Info' + results.rows.item(i).infoID + '" data-transition="flow">' + results.rows.item(i).Info + '</a></li>';
//end of loop

现在，您已将所有数据都放在一个名为li的变量中。现在你怎么用这个？把它放在<ul/>

中

$('#acceptedContent').html(li);

这样您就可以减少empty和append的使用。只需使用html()来擦除和重写。

现在是重要部分。您必须刷新列表视图。你必须使用listview("refresh")，但不要像你做的那样。您必须等待才能使html()完成其工作。只有这样，你必须使用refresh api，如下所示：

$('#acceptedContent').html(li).promise().done(function () {
   //refresh here - $(this) refers to ul here
   $(this).listview("refresh");
});

你有一些按钮。以防您可以使用trigger方法刷新它们。所以你的代码看起来像这样：

$('#acceptedContent').html(li).promise().done(function () {
   //refresh here - $(this) refers to ul here
   $(this).listview("refresh");
   //causes a refresh to happen on the elements such as button etc. WHICH lie inside ul
   $(this).trigger("create");
});

注意： 如果您收到此错误

未捕获错误：无法在listview之前调用方法初始化;试图调用方法'刷新'。

更改

$(this).listview("refresh");

到

$(this).listview().listview("refresh");

Answer 2

请尝试以下代码：

$('div[data-role=page]').page('destroy').page();

我这样用：

$("someid").ajaxStop(function(){
 $('div[data-role=page]').page('destroy').page();
});

这很好地重建了我的CSS。

Jquery移动在ul listview上丢失格式

2 个答案: