gpt4 book ai didi

javascript - ListView 的复选框未正确添加

转载 作者:行者123 更新时间:2023-11-28 00:07:41 24 4
gpt4 key购买 nike

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

我的代码在jsFiddle example下面

在示例中,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');

最佳答案

工作示例: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().

关于javascript - ListView 的复选框未正确添加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17620744/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com