jQuery Mobile的 - 的ListView控件上不顯示動態內容

Question

我有一個父列表（UL-LI），同時點擊從列表中我創建新的子列表裏並將其添加到新的一頁。如果我單擊第一次單獨使用相同的li或其他一些li，或者從父列表，子列表加載JQM的listview小部件，我會得到正確的jquery mobile的listview。相反，它正在加載正常列表。

請找到的jsfiddle鏈接 - http://jsfiddle.net/gopijsf/BG2ZV/1/

HTML：

<div data-role="page" id="parentPage"> 
     <header data-role="header" data-theme="d"> 
      <h3>Parent</h3> 
     </header> 
     <div>    
      <ul id="sectionUlContainer" data-role="listview"> 
       <li><a href="#" class="sectionItemClass">List1</a></li> 
       <li><a href="#" class="sectionItemClass">List2</a></li> 
       <li><a href="#" class="sectionItemClass">List3</a></li> 
       <li><a href="#" class="sectionItemClass">List4</a></li> 
      </ul> 
     </div> 
     <footer data-role="footer" data-position="fixed" data-theme="b"> 
      <h3></h3> 
     </footer> 
    </div> 

    <div data-role="page" id="childPage"> 
     <header data-role="header" data-theme="d"> 
      <h3>Child</h3> 
      <a href="#parentPage">Back</a> 
     </header> 
     <div id="childList"></div> 
    </div> 

JS：

$(document).ready(function(){ 
$('.sectionItemClass').click(function(){ 
    var childWidget = '<ul id="childUlContainer" data-role="listview"><li>childList</li></ul>'; 
    $('#childList').html(childWidget); 
    $.mobile.changePage('#childPage',{transition:'slide'}); 
}); 
}); 

幫助我如何每次重裝JQM的列表視圖。 在此先感謝。

Answer 1

使用此功能：

$('#childUlContainer').listview('refresh'); 

工作例如：http://jsfiddle.net/Gajotres/LrAyE/

在我的另一篇文章瞭解更多關於在這裏：​​jQuery Mobile: Markup Enhancement of dynamically added content

在這裏，你的代碼固定的：http://jsfiddle.net/Gajotres/uejY2/

$(document).on('pageinit', '#parentPage', function(){  
    $(document).on('click','.sectionItemClass',function(){ 
     var childWidget = '<ul id="childUlContainer" data-role="listview"><li>childList</li></ul>'; 
     $('#childList').html(childWidget); 
     $.mobile.changePage('#childPage',{transition:'slide'}); 
    }); 
}); 

$(document).on('pagebeforeshow', '#childPage', function(){  
    $('#childUlContainer').listview().listview('refresh') 
});