使用 JQuery mobile 创建 ListView 无法正常工作

Question

使用 JQuery mobile 我想将 ul-ListView 添加到通过 JScript 动态创建的窗口中，但出现了问题。

当我将 ListView 添加到 HTML 时，一切正常。定义看起来像

    ...            
        <div data-role=content>
             <ul id='listviewAktuelleChecklist' data-role=listview data-theme="d" data-divider-theme="d" data-inset=true>
                <li id="listDividerAktuelleChecklist" data-role=list-divider>yyy Checklist</li>
                <li id='LoadChecklist'> <a> Checkliste von Market-Value laden </a></li>
            </ul>
        </div>
   ...

当在 Firefox 中显示时，这正是预期的结果。但是当我通过 JScript 创建它时，它看起来像这样：

（对不起，由于缺少参考资料，我不允许在此处添加图片，所以这里是图片的链接： http://www.market-value.de/downloads/ul.jpg

顶部 ListView 是我通过 HTML 定义得到的，在“OK”按钮下方生成的是什么（对于那些不查看图片的人：生成的 Listviw 显示为带有项目符号的普通 HTML“ul”。 ..)

我使用了那个代码：

$("#BTN1").bind  ("click", function (event)
{
 var html = "";
 html += "<ul id='ChecklistListea' data-role=listview data-theme='d' data-divider-theme='d' data-inset=true>"
 html += '<li id="listDividerAktuelleChecklista" data-role=list-divider>yyy Checklist</li>'
 html +=   "<li id='LoadChecklista'> <a> Checkliste laden </a></li>";
 html += "</ul>";
 $(html).appendTo('#DivChecklistListe');

    $("#ChecklistListe").listview("refresh");

});

我尝试了一些不同的方法来创建动态 HMTL，但结果始终相同。

有谁知道，这里出了什么问题？

ps：如果我直接在 HMTL 中定义 ListView 并且只添加 ListItems 一切正常！

Answer 1

首先，您在错误的 id 上调用 refresh，但即使在正确的 id 的情况下，这也不起作用。这是因为您正在从头开始创建一个列表视图，ul 元素与内部 li 元素。

在这种情况下，调用 listview('refresh') 是不够的，因为 listview 在刷新之前必须先初始化。

可以这样做：

$("#ChecklistListea").listview().listview("refresh");

第一个 .listview() 调用将初始化一个列表视图，第二个调用将为其设置样式。

工作示例：http://jsfiddle.net/Gajotres/4HRNK/