2

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

我的代码在jsFiddle 示例下方

在示例中，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文件中的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');
4

1 回答 1

2

工作示例：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 的工作方式，您首先要设置复选框样式，然后是列表视图。

Checkbox通常.checkboxradio( "refresh" );用.checkboxradio()

于 2013-07-12T17:55:04.533 回答