刷新 JQuery Mobile 中的列表视图和复选框

Refreshing listview and checkboxes in JQuery Mobile

本文关键字:视图 复选框 列表 JQuery Mobile 刷新      更新时间:2023-09-26

我正在网页中动态添加<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>')

现在我如何刷新licheck 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>')