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");
});

或致电createlist上的pagebeforecreate功能，无需致电.listview()或.trigger()。

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

Answer 2

您不想替换UL的HTML：

窗口$（ “＃事件”）的HTML（htmlstring）;

你想将新的html附加到它：

窗口$（ “＃事件”）空（）追加（htmlstring）;

在以编程方式创建时，Jquery移动列表<ul>未格式化</ul>

2 个答案: