使用innerhtml在jQuery mobile中創建列表

Question

我正在嘗試使用jquery mobile提供的樣式創建列表。 當我在html文件中創建列表時，該列表包含了jquery mobile提供的樣式： http : //jquerymobile.com/demos/1.0/docs/lists/lists-search.html

但是，在我的網站上，我需要根據數組中對象的數量生成列表，因此我想通過使用javascript制作html腳本並更改div的innerHTML來做到這一點。 當我這樣做時，將出現一個普通列表，其中沒有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

使用JavaScript創建列表后，您需要確保JQuery Mobile對其進行了初始化。 使用以下代碼段，其中此列表是無序列表元素的ID。

$('#thislist').listview()

另外，如果已經存在具有data-role ='listview'的無序列表，那么您將要使用帶有參數'refresh'的相同的初始化程序。 這是另一個清單，其中此列表是無序列表的ID。 如果您動態地添加/刪除了刷新，則需要使用刷新。

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

Answer 2

我不相信解決方案，而是嘗試詳細解釋它，因為我花了一些時間弄清楚它，但是更改應該是這樣的。

原始代碼：

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'>";

...

searchList.innerHTML = htmlString;
}

固定代碼：

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

...

searchList.innerHTML = htmlString;
$('#thislist').listview();
}

這樣，它使用來自jquery mobile的listview顯示您的列表。

Answer 3

您沒有使用與jQuery Mobile相同的CSS。 如果您在提供的鏈接上查看HTML，則會看到他們的列表項上還有其他類：

<ul data-role="listview" data-filter="true" class="ui-listview">
  <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
    <div class="ui-btn-inner ui-li" aria-hidden="true">
      <div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Acura</a></div>
      <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
    </div>
  </li>
</ul>