在jquery mobile中动态添加<li/>到<ul/>

Question

我正在尝试将列表项添加到 jquery mobile 中的无序列表中，但格式似乎没有正确创建。

<ul data-role="listview" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">
                        Title Divider
                    </li>
                    <li>
                        <a href="test.html" data-transition="slide">List item 1</a>
                    </li>

 </ul>

脚本：

$('ul').append('<li><a>hello</a></li>');

由于某种原因，动态生成的 li 与静态创建的显示方式不同。有谁知道为什么以及如何使它相同？

Answer 1

试试这个：

$('ul').append($('<li/>', {    //here appending `<li>`
    'data-role': "list-divider"
}).append($('<a/>', {    //here appending `<a>` into `<li>`
    'href': 'test.html',
    'data-transition': 'slide',
    'text': 'hello'
})));

$('ul').listview('refresh');

Answer 2

提供的答案结果有点混乱......

$('ul').append('<li><a>hello</a></li>'); 可以，但是需要刷新listview，所以你只需要：

$('ul').append('<li><a>hello</a></li>').listview('refresh');

Answer 3

如果你想改变 UL 的属性，你可能需要为封闭的 div 调用 .trigger('create')。这可确保在重置属性的情况下再次创建 UL。

Answer 4

您的 标记未引用网页。

尝试：

$('ul').append('

List Item 2

');