刷新 JQuery Mobile 中的列表视图和复选框
Refreshing listview and checkboxes in JQuery Mobile
我正在网页中动态添加<li>
和checkBoxes
,但我JQuery Mobile
但添加后无法正确查看,我尝试使用$('#contactList').listview('refresh')
但它显示错误,listview is not a function
这是我的 HTML 部分
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search" id="contactList">
</ul>
我动态添加的JS部分是
$('#contactList').append('<li>'
<input type="checkbox" name="'+contactId+'" id="'+contactId+'" class="custom" />'
<label for="checkbox-5a">'
<span class="span2 contact-name">'
'+contactName+''
</span>'
<span class="contact-image">'
<img src="'+contactImage+'"/>'
</span>'
</label>'
</li>')
现在我如何刷新li
和check boxes
,以便它们看起来正确
更新:: 我的页面头像是这样的
<script src="js/jquery-1.9.1.min.js"></script> <!-- Scripts n CSS -->
<script src="js/jquery.mobile-1.3.1.min.js"></script> <!-- for J Query Mobile -->
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<script src="js/jquery-ui.js"></script>
<!-- For BootStrap -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet"/>
<link href="css/bootstrap-responsive.css" type="text/css" rel="stylesheet"/><!-- Must Same Order -->
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- User Generated JS Files -->
<script src="lib/work-space.js"></script>
<script src="lib/contactsFile.js"></script>
您应该在label-for
中使用与checkbox
名称相同的名称
你的代码是
$('#contactList').append('<li>'
<input type="checkbox" name="'+contactId+'" id="'+contactId+'" class="custom" />'
<label for="checkbox-5a">'
<span class="span2 contact-name">'
'+contactName+''
</span>'
<span class="contact-image">'
<img src="'+contactImage+'"/>'
</span>'
</label>'
</li>')
但你应该写这个
$('#contactList').append('<li>'
<input type="checkbox" name="'+contactId+'" id="'+contactId+'" class="custom" />'
<label for="'+contactId+'">'
<span class="span2 contact-name">'
'+contactName+''
</span>'
<span class="contact-image">'
<img src="'+contactImage+'"/>'
</span>'
</label>'
</li>')
相关文章:
- 如何在Knockout.js中选中复选框时更新视图模型及其依赖项
- 检查网格视图中的复选框是否被选中
- 复选框树视图功能不起作用
- 转换复选框'在'在发布到Django视图之前,将其设置为Boolean
- 如何选中/取消选中外部按钮的网格视图复选框
- 添加具有相同类的视图复选框(Switchery)
- jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框
- 在客户端的编辑模式下,在同一单元格网格视图中选中复选框时禁用文本框
- 如何使用javascript在选中网格视图复选框时创建表行
- 使用 javascript 在客户端的列表视图中选中所有复选框
- 从 JavaScript 中的表单视图访问复选框 asp.net
- 如何从网格视图中隐藏复选框
- “网格视图”复选框选中“所有上层和下层”
- yui树视图复选框不展开节点
- 为多个网格视图选中“验证网格视图”复选框
- 如何通过阵列手动检查树视图复选框
- 如何在剑道模板中设置带有name属性的树视图复选框
- 带有图形更新的树视图复选框选择不能正常工作
- 树视图复选框解决方案
- 树视图复选框 展开折叠