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

Checkbox to listview not added properly

本文关键字：视图 复选框 列表 添加      更新时间：2023-09-26

我想创建一个带有图像和复选框的动态列表，它运行良好，但当我在函数onload中动态生成它时，它不能正确生成

我的代码在jsFiddle示例下面

在这个例子中，HTML5中有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文件中的Onload函数：

 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');

工作示例：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');将只设置listview和listview的样式，不要忘记您还有一个要设置样式的复选框。由于jQuery Mobile的工作方式，您首先需要设置复选框的样式，然后再设置列表视图。

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

相关文章：