jquery - 动态添加列表项到 j-Query Mobile ListView

标签 jquery html listview jquery-mobile

我正在尝试使用 j query mobile 填充 ListView

我的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>

预期结果是这样的

Result i Expected

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

Result Obtained

谁能告诉我这是什么问题?

最佳答案

因为您动态更改了 ListView ,所以您需要刷新它以便 JQM 应用正确的样式。每次将一个(或多个)项目添加到列表时都需要执行此操作。

这可以通过以下语句实现:

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

如果您想了解更多相关信息,我想推荐您参阅 JQM 文档: http://jquerymobile.com/test/docs/lists/docs-lists.html (更新列表,在页面底部)

关于jquery - 动态添加列表项到 j-Query Mobile ListView ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13153739/

相关文章:

javascript - 使用 jquery : does not work on Iphone, safary 等显示和隐藏微调器

javascript - 在以下情况下,当错误来自PHP作为对Ajax请求的响应时,如何显示警报?

jquery - 如何让隐藏的描述文本在显示时将内容向上推

python - 使用 Python BeautifulSoup 分隔同一 <td> 标签内的两个文本

javascript - 使用 JQuery 随机显示一个 div 类

c# - 为什么在单元测试中实例化ListView时SelectedIndices和SelectedItems不起作用?

android - 禁用拉动加载以刷新 ListView

jQuery 为它找到的每个元素返回两个元素?

html - 如何将 Material 图标和标题文本对齐在同一行?

javascript - 如何根据边框元素在winjs ListView 中删除焦点