[英]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>')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.