【问题标题】：jQuery mobile - preserve list style after appendjQuery mobile - 追加后保留列表样式
【发布时间】：2013-06-16 05:46:52
【问题描述】：

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

一个：

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('refresh') 不起作用。

查看：https://stackoverflow.com/a/11943886/488407

PS：我使用的是最新版本的 jQuery mobile (v1.3.1)，所以这个解决方案可能适用于早期版本。我在使用 Panels 时需要使用最新版本。

【问题讨论】：

精彩的文章。问题是什么？
通常 listview 不需要刷新事件。只要确保将此附加代码放在中，而对 jQuery 和 jQM 的引用存在于
问题是 - 如何在将项目添加到列表后保留样式。
@passionateCoder - 我是通过绑定函数中的 javascript 闭包来执行此操作的。
@JashSayani 我们需要查看更多代码。无论如何，我已经给出了答案。看看这是否适合你

标签： jquery jquery-mobile

【解决方案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

你不需要refreshlistview。 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"
            ];

这是 HTML：

 <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>

这就是我要注入的方法：

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

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

将您的脚本放入正文中，您就完成了。之所以有效，是因为在<body> 中追加是同步的。因此，当您使用它时，您可以确定元素已经加载到 DOM 中并准备好刷新，jQM 会自动执行此操作。

Here's a demo

jsFiddle 中的选项 - 来自 jsFiddle docs

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

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

no wrap - in <head>：不包装 JavaScript 代码，将其放在 <head> 部分

no wrap - in <body>：不包装 JavaScript 代码，将其放在 <body> 部分

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

【讨论】：

这是在一个名为 popualte() 的函数中——当它被调用时看起来不错。添加后再次调用该函数，然后样式丢失。
@JashSayani 请把它放在小提琴@jsfiddle.net 中并给我们 URL :) 抱歉我看不清楚..
@JashSayani: jsfiddle.net/hungerpain/u9TcE/1 我将脚本的位置从 onLoad 更改为 no wrap in <body> 。这个选项在你选择jquery版本的地方下面
嗯.. 所以它可以在不更改代码的情况下工作。您能否更新您的答案来解释加载“onLoad”、“onDomReady”、“No wrap - head”、“No wrap - body”之间的区别。理解这一点会很好。另外，如何在我的代码中解决这个问题？
@JashSayani 我曾经使用过超时解决方案，但我发现将我的脚本放在<body> 中性能更高，而且干预更少。

【解决方案2】：

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

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

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

【讨论】：