在JQuery Mobile中刷新ListView和復選框

Question

我在網頁中動態添加<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>

Answer 1

您應該在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>')