将列表项动态添加到 j-Query 移动列表视图答案

【问题标题】：dynamically adding list item to j-Query Mobile List View将列表项动态添加到 j-Query 移动列表视图
【发布时间】：2012-10-31 08:17:02
【问题描述】：

我正在尝试使用 j query mobile 填充列表视图

我的html代码是

<!DOCTYPE html>

<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Demo Page</title>

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>

function onDeviceReady() {}
document.addEventListener("deviceready", onDeviceReady, false);

function Button_onclick() {

for(i=0; i < 3; i++){
        $("#numbers").append('<li>' +i+'</li>' );
}

}

<div >
    <input id="Click_Button" type="button" value="Submit" onclick="Button_onclick()" />
</div>

<div id="divList" data-role="content">
    <ul id="numbers" data-role="listview" data-inset="true"> </ul>
</div>

预期结果是这样的

但是我得到的结果是这样的

谁能告诉我是什么问题？

【问题讨论】：

标签： jquery html listview jquery-mobile

【解决方案1】：

因为您动态地更改列表视图，您需要刷新它以便 JQM 应用正确的样式。每次向列表中添加一个（或多个）项目时，您都需要这样做。

这可以通过以下语句来实现：

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

如果您想了解更多关于这方面的信息，我想推荐您参考 JQM 文档： http://jquerymobile.com/test/docs/lists/docs-lists.html（更新列表，在页面底部）

【讨论】：

请将其标记为回复，然后可以关闭此问题。

【解决方案2】：

附加此onbuttonclick.

$("#numbers").append('<li style="list-style-position:inside;border: 1px solid black;">'+i+'</li>' );

li style="list-style 将在内部保留 li 文本和 border 将在 li 周围创建框

并将其用于第一个和最后一个 li 项目。

//for first child
li:last-child{
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
//for last child
li:first-child{
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

【讨论】：

我试过你的建议。实际上这不是我想要的结果，谢谢你的努力和关心