方法2（最近的）

Question

这个问题多次被问到堆栈溢出，我已经尝试了所有问题的所有解决方案。以下是它们的列表：

一：

var list = '';
for....
   list += 'html...';
$('#mylist').append(list);
$('#mylist').listview('refresh'); // appending all at once with var

二：

for....
   $('#mylist').append('html...');
$('#mylist').listview('refresh'); // refresh once after appends

三：

for....
   $('#mylist').append('html...');
$('#mylist').listview().listview('refresh'); // to init listview

四：

for....
   $('#mylist').append('html...').listview('refresh'); // refresh after each append - BAD

我还尝试了更多变化。没有.listview（'refresh'） - 样式在追加时被剥离。当我使用刷新调用时，它可以工作，但我收到javascript错误说：

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

使用.listview().listview('refresh')不起作用。

参见：https://stackoverflow.com/a/11943886/488407

PS：我使用的是最新版本的jQuery mobile（v1.3.1），因此这个解决方案可能适用于早期版本。我需要使用最新版本，因为我正在使用Panel。

Answer 1

方法2（最近的）

如果您完全确定要使用listview("refresh")，建议您使用promise()来解决append是否已完成，然后应用refresh 。像这样：

var li = ""; //append to a string
for (var i = 0; i < accounts.length; i++) {
    li += '<li data-oid="' + accounts[i]._oid + '"><a><h2>' + accounts[i].nickname + ' - ' + accounts[i].bankname + '</h2><p>Balance: ' + accounts[i].acccy + " " + accounts[i].acbal + '</p></a></li>';
}

//check if append is done by chaining promise() and done() 
$('#accountlist').append(li).promise().done(function () {
    $(this).listview("refresh"); // refresh here
});

在这里演示：http://jsfiddle.net/hungerpain/u9TcE/4/

此处有更多信息：Promise Docs

方法1

您无需refresh listview 。 listview元素不需要太多的CSS操作来使它们看起来像它们的样子。所以它们是动态设置的（即当append li ul data-role listview设置为var songs = [ "Sweet Child 'O Mine", "Summer of '69", "Smoke in the Water", "Enter Sandman", "I thought I've seen everything" ];时。{看这个数组在这里：

 <ul data-role="listview" id="songlist" data-theme="c" data-divider-theme="a" data-inset="true">
     <li data-role="list-divider" role="heading">Song List</li>
 </ul>

这是HTML：

    $.each(songs, function (i, song) {
       $("<li/>", {
            "data-icon": "star",
            "class": "vote",
            "html": '<a href="#" id="song' + i + '">' + song + '</a>',
            "id": i
       }).appendTo("#songlist");
    });

以下是我要注入的方法：

<body>

这就是。你不需要做更多的事情来完成这项工作。接下来最重要的是安置：

enter image description here

将您的脚本放入正文并完成。这样做的原因是因为<head>中的追加是同步的。因此，当您使用它时，您可以确保该元素已经在DOM中加载并准备好刷新，jQM会自动执行该操作。

Here's a demo

jsFiddle中的选项 - 来自jsFiddle docs

onLoad ：包装代码，使其在onLoad窗口事件中运行，将其放在<head>部分

onDomReady ：包装代码，使其在onDomReady窗口事件中运行，将其放在<head>部分

没有换行<head> ：不要包装JavaScript代码，将其放在<body>部分

没有换行<body> ：不要包装JavaScript代码，将其放在<script>部分

要使您的解决方案正常工作，请复制您在其中编写的js标记/您输入的<body>文件的引用，并将其粘贴为{的最后一个元素{1}}。

Answer 2

尝试$("#your_list").trigger("refresh");

for(...)
   $('#mylist').append('html...');

// call tirgger refresh after your append.
$("#your_list").trigger("refresh");

jQuery mobile - 追加后保留列表样式

2 个答案:

方法2（最近的）

方法1