Javascript 使用innerhtml在jquery mobile中创建列表

我正在尝试使用jquery mobile提供的样式创建一个列表。在html文件中创建列表时，该列表包含jquery mobile提供的样式：

然而，在我的网站中，我需要根据数组中对象的数量生成列表，因此我希望通过使用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;
}

函数生成器列表（appArray）{
var searchList=document.getElementById（'searchList'）；
var-app；
var htmlString=“
”；
对于（i=0；i您没有使用与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>





您没有使用与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>





我不认为这个解决方案值得称赞，而是试图详细解释它，因为我花了一些时间才弄明白，但变化应该是这样的

原始代码：

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

函数生成器列表（appArray）{
var searchList=document.getElementById（'searchList'）；
var-app；
var htmlString=“
”；
...
searchList.innerHTML=htmlString；
}

固定代码：

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

函数生成器列表（appArray）{
var searchList=document.getElementById（'searchList'）；
var-app；
var htmlString=“
”；
...
searchList.innerHTML=htmlString；
$（'#thislist'）。listview（）；
}

通过这种方式，它可以使用jquery mobile的listview显示您的列表。
我不认为这个解决方案值得称赞，而是试图详细解释它，因为我花了一些时间才弄清楚，但更改应该是这样的

原始代码：

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

函数生成器列表（appArray）{
var searchList=document.getElementById（'searchList'）；
var-app；
var htmlString=“
”；
...
searchList.innerHTML=htmlString；
}

固定代码：

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

函数生成器列表（appArray）{
var searchList=document.getElementById（'searchList'）；
var-app；
var htmlString=“
”；
...
searchList.innerHTML=htmlString；
$（'#thislist'）。listview（）；
}

通过这种方式，它使用jquery mobile的listview显示列表。
您需要确保jquery mobile在使用javascript创建列表后初始化列表。使用以下代码段，其中thislist是无序列表元素的id

$('#thislist').listview()

此外，如果具有data role='listview'的无序列表已经存在，则您需要使用参数'refresh'的同一初始值设定项。下面是另一个代码段，其中thislist是无序列表的id。如果您动态添加/删除了其中的项，则需要使用刷新

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

您需要确保JQuery Mobile在使用javascript创建列表后对其进行初始化

$('#thislist').listview()

此外，如果具有data role='listview'的无序列表已经存在，则您需要使用参数'refresh'的同一初始值设定项。下面是另一个代码段，其中thislist是无序列表的id。如果您动态添加/删除了其中的项，则需要使用刷新

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

我可以在HTML页面上使用与我创建的脚本完全相同的脚本创建列表。当我试图从Javascript创建列表时，它无法做到这一点。设置innerHTML后，我应该调用哪个插件以及如何调用它以及在何处调用它？（我对web开发非常陌生）。$（“#searchList'）。listview（）；嗯……试着给
元素添加一个id，然后调用该元素上的插件。我可以使用与我设置的脚本完全相同的脚本在HTML页面上创建列表。当我尝试从Javascript创建列表时，它无法做到这一点，我应该调用哪个插件，以及如何和在哪里调用它？（我对web开发非常陌生）在设置innerHTML.$（'#searchList'）.listview（）；Hm.之后，尝试向
元素添加一个id，并在该元素上调用插件。