1

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

一：

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 时需要使用最新版本。

4

2 回答 2

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

方法一

你不需要refreshlistview。listview元素不需要太多的 CSS 操作来使它们看起来像它们的样子。append因此，它们是动态设置的（即，当您使用set toli进入 a时。在此处查看此数组：uldata-rolelistview

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 会自动执行此操作。

这是一个演示

jsFiddle 中的选项 - 来自 jsFiddle文档

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

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

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

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

为了使您的解决方案正常工作，请复制<script>您在其中编写此内容的标签/js您输入此内容的文件的引用，并将其粘贴为<body>.

于 2013-06-16T06:52:43.670 回答
-1

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

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

// call tirgger refresh after your append.
$("#your_list").trigger("refresh");
于 2013-06-16T06:25:21.630 回答