画像とチェックボックスで動的リストを作成したいのですが、正常に動作していますが、関数のオンロードで動的に生成すると、正しく生成されません
私のコードはjsFiddleの例の下にあります
例では HTML 5 に 2 つの li がありますが、JavaScript で生成される 3 つ目の 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');