未正确添加到列表视图的复选框答案

【问题标题】：Checkbox to listview not added properly未正确添加到列表视图的复选框
【发布时间】：2013-07-12 17:33:29
【问题描述】：

我想创建一个带有图像和复选框的动态列表，它工作正常，但是，当我在函数 onload 动态生成它时，它不能正确生成

在示例中，HTML 5 中有 2 个 li，但在 JavaScript 中生成的第三个 li 没有正确生成

HTML 代码：

<body>
    <!-- page -->
    <div id="tryhtml" data-role="page" data-palette="">
        <!-- header -->
        <div data-role="header" data-position="fixed">
            <h1>Application</h1>   
        </div><!-- /header -->
        <div data-role="content">
            <ul data-icon="none" id="FB" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
                <li data-role="list-divider">Overview</li>
                <li>
                        <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" data-iconpos="right"/>
                        <label for="checkbox-1a"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/261025_100001129460073_937883521_q.jpg" style="margin-right:20PX; float:left" width="35" height="35"/>Cheetos dffaf</label>

                </li>
                <li>

                        <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" data-iconpos="right"/>
                        <label for="checkbox-2a"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/261025_100001129460073_937883521_q.jpg" style="margin-right:20PX; float:left" width="35" height="35"/>Cheetos dffaf</label>

                </li>           
            </ul>
        </div>

    </div><!-- /page -->
</body>

在js文件中加载函数：

 var tag = '<li><input type="checkbox" name="checkbox-5a" id="checkbox-5a" data-iconpos="right"/><label for="checkbox-5a"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/261025_100001129460073_937883521_q.jpg" style="margin-right:20PX; float:left" width="35" height="35"/>Roy dffaf</label></li>';
$('#FB').append(tag);   
$('#FB').listview('refresh');

【问题讨论】：

标签： javascript jquery html jquery-mobile jquery-mobile-listview

【解决方案1】：

工作示例：http://jsfiddle.net/brBdD/21/

var tag = '<li><input type="checkbox" name="checkbox-5a" id="checkbox-5a" data-iconpos="right"/><label for="checkbox-5a"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/261025_100001129460073_937883521_q.jpg" style="margin-right:20PX; float:left" width="35" height="35"/>Roy dffaf</label></li>';


$('#FB').append(tag);   
$('#FB').find('#checkbox-5a').checkboxradio().checkboxradio( "refresh" );
$('#FB').listview('refresh');

在您的情况下，.listview('refresh'); 只会设置列表视图和列表视图的样式，不要忘记您还有一个复选框可以设置样式。由于 jQuery Mobile 的工作方式，您首先要设置复选框的样式，然后是列表视图。

复选框通常使用 .checkboxradio( "refresh" ); 进行样式设置，但在这种情况下，我们有一个动态创建的复选框，因此首先需要使用 .checkboxradio() 对其进行初始化。

【讨论】：