将<li>附加到<ul> </ul> </li>时，HTML5元素显示不正确

Question

我的网页显示有问题。我使用了一个带有项目的无序列表。但是，在通过javascript代码生成的项目添加无序列表之后，它们以错误的方式出现并且不遵循无序列表的css规则

另外，我使用的是jquery mobile 1.4.2 css和js

这是html代码：

<div id="all" class="ui-body-d ui-content">
                <ul id="allList" data-role="listview" >
                    <li><a href="#">1Data Mining</a></li>
                    <li><a href="#">1Ethics</a></li>
                    <li><a href="#">1HCI</a></li>
                    <li><a href="#">1Mobile Dev</a></li>
                    <li><a href="#">1Software Testing</a></li>
                </ul>
            </div>

这是将新项目插入列表

的javascript代码

function getDeadlines_success(tx, results){

var len = results.rows.length;
//var s = "";
for (var i=0; i<len; i++){
    var deadline = results.rows.item(i);

    $('#allList').append('<li><a href="#">1Software Testing</a></li>');
}
;}

Answer 1

以下是您的代码：http://jsfiddle.net/ruslans/dKy3B/

修改：替代解决方案（根据众多建议）：

$("button#btn").click(function () {
    $('#allList').append('<li><a href="#">1Software Testing</a></li>');
    $("#allList").listview('refresh');
});

http://jsfiddle.net/ruslans/tUJt5/

---

您粘贴的标记不是渲染后生成的标记，实际上比它更麻烦：

<div id="all" class="ui-body-d ui-content">
  <ul id="allList" data-role="listview" class=" ui-listview">
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child ui-btn-hover-d ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Data Mining</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-d"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Ethics</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1HCI</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Mobile Dev</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="d" class="ui-btn  ui-btn-up-d ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child"><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="#" class="ui-link-inherit">1Software Testing</a></div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></div></li>
  </ul>
</div>

要在此列表中添加项目并保留样式，您必须根据此回答Dynamically adding <li/> to <ul/> in jquery mobile执行此类操作：

$('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

请在下次使用Google或stackoverflow搜索功能。

我的第一个打击：https://stackoverflow.com/a/5926112/994304

    $('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');

最后一行（刷新）对于jQuery Mobile再次布局UI控件非常重要。 我不确定所有jQuery控件都需要它，但我确信这个：）。

的Stefan。

Answer 3

尝试刷新listview

$("#all").listview('refresh');