Jquery mobile在ul listview上丢失格式

Question

这是我的列表视图元素：

<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>');

任何建议都将不胜感激，因为我一直在尝试解决这个问题。

我已经尝试了以下操作以及执行顺序，但没有任何效果，我在重建部分进行附加调用后将以下列表视图刷新：

$("#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。