以编程方式创建时，Jquery 移动列表 未格式化

Question

我可能做了一些愚蠢的事情，但我一生都无法弄清楚这一点。我有一个 Jquery Mobile 格式的列表。我在表的 for 循环中以编程方式创建列表元素。

第一次通过函数调用显示列表时，它会以 JQuery Mobile 格式正确显示并遵循主题。但是，如果第二次或多次调用该函数，列表将恢复为标准 HTML 格式，并带有蓝色下划线链接。

这是代码:

var createlist = function()
{
    window.$("#searchresults").html(resultsstring);
    var htmlstring = "";
    for (var i = 0; i<resultsarray.length; i++)
    {
        var eventtime = resultsarray[i].eventtime;
        var displaystring = resultsarray[i].string;
        var tmp = /(\d\d\d\d)-(\d\d)-(\d\d)\s(\d\d):(\d\d):(\d\d)/.exec(eventtime);
        var adjusteddate = new Date(tmp[1],tmp[2] - 1,tmp[3],tmp[4],tmp[5],tmp[6]);
        adjusteddate.setMilliseconds(adjusteddate.getMilliseconds() + offset); //this converts the VB event time to their local time
        htmlstring += "<li><a href=\"javascript:applib.showcameras(" + i + ")\">" + adjusteddate.toLocaleTimeString() + displaystring + "</a></li>"; //title=\""+resultsarray[i].string+"\"
    }
    window.$("#events").html(htmlstring);
    window.$("#events").trigger('refresh');
    window.$.mobile.changePage("#eventspage");
};

这是我测试期间输出的 HTML 字符串:

"<li><a href=\"javascript:applib.showcameras(0)\">‎9‎:‎01‎:‎18‎ ‎AM security state was set to disarmed</a></li>"

这是 HTML:

<div data-role="page" data-theme="a" id="eventspage" >
    <div data-role="content">
        <ul data-role="listview" id="events" data-filter="true" data-filter placeholder="Search Records...">
        </ul>
</div>

非常感谢任何建议!第一次看起来像一个不错的列表按钮，第二次看起来像蓝色文本。

Answer 1

您没有正确调用增强功能，您应该使用$("#events").listview("refresh")。

window.$("#events").html(htmlstring);
window.$("#events").trigger('refresh'); // remove this
window.$.mobile.changePage("#eventspage");

添加以下代码

$(document).on("pagebeforeshow", "#eventspage", function () {
  $("#events").listview("refresh");
});

或者在 pagebeforecreate 上调用 createlist 函数，而不调用 .listview() 或 .trigger()。

$(document).on("pagebeforecreate", "[data-role=page]", function (e) {
  createlist();
});