jQuery移动列表视图刷新答案

【问题标题】：jQuery mobile listview refreshjQuery移动列表视图刷新
【发布时间】：2015-09-26 08:29:01
【问题描述】：

除了一个问题外，我在加载后使用动态构建的列表使列表视图刷新正常运行。列表中的最后一个 <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;

}

【问题讨论】：

请编辑您的问题并添加一些您正在使用的代码
正如 Phill 所说，请提供一些代码！此外，请务必验证您的标记：可能有一些愚蠢的遗漏，这意味着 jQM 无法正确执行 listview.refresh 调用。
感谢您的回复。我发布了负责创建列表的函数。我们还没有将整个脚本转换为 jQuery，将来会推出。

标签： jquery-mobile

【解决方案1】：

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

所以它恰好适用于您的所有 LI，因为除了最后一个，因为它始终是跟随 LI，它会导致列表以正确的外观被引用。

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

【讨论】：

【解决方案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 ***
        }
    });
}

【讨论】：

【解决方案3】：

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

Chrome 应该会提示您无法对未实例化的列表视图应用刷新。

你可以试试这个，它可能会解决你的问题（它为我解决了同样的问题）。

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

【讨论】：

【解决方案4】：

列表视图刷新功能（jqm 1.0 beta1）也有一些问题。在 IE8 上，情况更糟。

所以我的解决方案是简单地检查 jqm 对<li> 标签所做的操作。
并直接插入after-refresh-html-code。

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

【讨论】：

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