jQuery移动端列表刷新

Question

我已经成功地实现了动态构建列表并使得listview可以刷新，但是有一个问题。在列表中最后一个<li>标签没有应用任何样式。

刷新操作实际上将ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c类添加到倒数第二个<li>标签。

你有什么想法为什么会发生这种情况？

下面是动态生成列表的函数代码：

function createSidebarEntry(marker, name, phone, address, distance) {
  var saddr = document.getElementById('addressInput').value;
  var li = document.createElement('li');
  var html = '' + name + ' (' + distance.toFixed(1) + ' miles)' + address + phone +'<a href="http://maps.google.com/maps?saddr='+ saddr +'&daddr=' + address +'" /></a>';
  li.innerHTML = html;

  $('#locationList').listview('refresh'); 

  return li;

}

- Taylor

---

请编辑您的问题并添加您正在使用的代码 - Phill Pafford

正如Phill所说，麻烦提供一些代码！同时，请确保验证您的标记：可能会有一些愚蠢的错误被忽略了，这会导致jQM无法正确执行“listview.refresh”调用。 - Ben

谢谢您的回复。我发布了负责创建列表的函数。我们还没有完全将脚本转换为jQuery，这将在未来进行。 - Taylor

Answer 1

有时需要在调用刷新之前实例化listview视图。

Chrome应该会给你一个错误提示，说你不能对未实例化的listview应用刷新。

你可以尝试这个方法，它可能会解决你的问题（它解决了我遇到的完全相同的问题）。

$('#locationList').listview().listview('refresh');

- nccn

Answer 2

调用.listview("refresh")对我没有起作用。它只创建了一个基本列表，没有样式。

这是对我有用的方法：

function updateData()
{
    $.ajax({
        url: '@Html.Raw(ajaxUrl)',
        async: false,
        beforeSend: function () { $.mobile.showPageLoadingMsg(); },
        complete: function ()
        {
            $.mobile.hidePageLoadingMsg();
            $("ul:jqmData(role='listview')").listview();
        },
        success: function (data, textStatus, jqXHR)
        {
            $('#myDiv').html(data);
            $('#myDiv').trigger("create"); // *** THIS IS THE KEY ***
        }
    });
}

- Eric J.

Answer 3

从您的代码来看，您是在函数外部将li添加到了列表视图中，但是您在函数内部调用了.listview('refresh')。

因此，它仅对除最后一个LI以外的所有LI起作用，因为总是下一个LI会使列表以正确的外观和感觉进行刷新。

解决方案：在函数外部添加最后一个LI后，只需调用.listview('refresh'); 即可。这还会提高性能，因为您只有在完成动态添加所有新LI元素后才会刷新列表视图。

- Maks

Answer 4

我也遇到了一些与listview刷新函数（jqm 1.0 beta1）有关的问题。在IE8上，情况更糟。

所以我的解决方案就是简单地检查jqm对<li>标签所做的操作。
然后直接插入刷新后的HTML代码。

这不是一个优雅的解决方案，但它有效。

- Vergil Lu

---

希望尽可能保持脚本的简洁，因为它将用作位置查找器，已经有一些繁重的JS在运行，导致浏览器崩溃。 - Taylor