複選框正常

我想創建一個圖像和複選框的動態列表，它的，做工精細，但是當我在函數onload事件動態地生成它，它不會產生正確複選框正常

在該例子中有2個立在HTML 5但第三裏，在JavaScript的生成不會產生正確

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

來源

2013-07-12 Chehmer

工作例如：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而已，別忘了你也有一個複選框樣式。由於jQuery Mobile的工作原理，您首先需要對複選框和列表視圖進行樣式設置。

複選框通常與.checkboxradio("refresh");風格，但在這種情況下，我們有一個動態創建的複選框，以便它首先需要與.checkboxradio()進行初始化。

來源

2013-07-12 17:55:04 Gajotres

回答

相關問題