javascript - 使用innerhtml在jquery mobile中制作列表

Question

我正在尝试使用 jquery mobile 提供的样式创建一个列表。当我在 html 文件中创建列表时，该列表包含 jquery mobile 提供的样式:http://jquerymobile.com/demos/1.0/docs/lists/lists-search.html

但是在我的网站中，我需要根据数组中的对象数量生成列表，因此我想通过使用 javascript 制作 html 脚本并更改 div 的 insideHTML 来实现此目的。当我这样做时，会出现一个普通列表，没有 jquery mobile 的样式。

有人能解决我的问题吗？

这是我的标记代码:

function GenerateList(appArray) {
    var searchList = document.getElementById('searchList');
    var app;
    var htmlString = "<ul data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";

    for(i=0; i<appArray.length;i++) {
        app = appArray[i];
        htmlString = htmlString + "<li><a id=App" + (i+1).toString() + " onclick='AppSelected(id);'>";
        htmlString = htmlString + "<img src='DummyImages/" + app[1] + "' alt='Logo' class='ListAppLogo'>";
        htmlString = htmlString + "<h3>"+ app[2] + "</h3>";
        htmlString = htmlString + "<p>" + app[4] + ".0/5.0</p>";
        htmlString = htmlString + "<input type='hidden'>" + app[0] + "</a></li>";
    }

    htmlString = htmlString + "</ul>";
    searchList.innerHTML = htmlString;
}

Answer 1

您需要确保 JQuery Mobile 在使用 JavaScript 创建列表后初始化该列表。使用以下代码片段，其中 thislist 是无序列表元素的 id。

$('#thislist').listview()

此外，如果 data-role='listview' 的无序列表已存在，那么您将需要使用带有参数“refresh”的相同初始值设定项。这是另一个片段，其中 thislist 是无序列表的 id。如果您动态添加/删除了项目，则需要使用刷新。

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