Question

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

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

HTML code：

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

Answer 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'); 仅会设置listview和listview的样式，请不要忘记您还有一个样式复选框。由于jQuery Mobile的工作原理，你首先想要设置样式复选框然后再列出listview。

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

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

1 个答案: