Jquery Mobile動態列表觸發（創建）後不顯示？

Question

我希望有人可以幫我解決我的問題，因爲我還沒有找到有類似問題的人......我有以下代碼位於我的移動應用程序的第二頁。第二頁使用第一頁的鏈接打開，第二頁將2個JSON字符串加載到列表視圖和字段集中。

我的問題是，在頁面的第一次加載時，動態html沒有注入到適當的區域，但是如果我刷新頁面，html /數據將被注入。

我錯過了什麼？ 我應該試圖加載數據使用不同的方法，如頁面加載等？

<script src="/js/json.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
    $(document).bind("pageinit", function(){ 
     //stop orientation changes!!! 
     $.mobile.orientationChangeEnabled = false;   
     //populate drug classes list 
     $.each(jQuery.parseJSON(jsonDrugClasses), function(i,v){ 
      $("#DrugClassesList").append("<li><a href='drugclass.html' rel='" + v["ClassID"] + "' title='"+v["ClassName"]+"'>" + v["ClassName"] + "</a></li>").trigger("create"); 
     }); 
     $("#DrugClassesList").trigger("create"); 
     $("#DrugClassesList").listview("refresh"); /* required to apply styling */ 

     //checkbox list dynamicly generated 
     DrugsSorted = $(jQuery.parseJSON(jsonDrugs)).sort(sortDrugName); 
     $("#DrugsCBList").append('<fieldset data-role="controlgroup" data-theme="e" id="cbFieldSet">'); 
     $.each(DrugsSorted, function(k,v){ 
      $("#cbFieldSet").append('<input type="checkbox" name="'+v["DrugID"]+'" id="'+v["DrugID"]+'" value="'+v["DrugID"]+'"/><label for="'+v["DrugID"]+'">'+v["DrugName"]+'</label>'); 
     }); 
     $("#DrugsCBList").append('</fieldset>'); 
     $("#DrugsCBList").trigger("create"); 

    }); 
</script> 
<script src="/jquery-mobile/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="css/reset.css" type="text/css" /> 
<link href="jquery-mobile/jquery.mobile-1.1.1.css" rel="stylesheet" type="text/css" /> 
<link href="jquery-mobile/jquery.mobile.structure-1.1.1.min.css" rel="stylesheet" type="text/css"/>  
<link rel="stylesheet" type="text/css" href="css/ddi.css"> 


<!-- Collapseable menus --> 
<div data-role="collapsible-set" data-theme="c" data-content-theme="e" data-split-icon="arrow-r" data-iconpos="right"> 
    <div data-role="collapsible"> 
    <h3>Drug Classes</h3> 
    <p style="padding:0px; margin:0px;"> 
    <div data-role="fieldcontain"> 
     <ol data-role="listview" data-inset="true" data-theme="e" id="DrugClassesList"> 
     <!-- Data loaded dynamically --> 
     </ol> 
    </div> 
    </p> 
    </div> 
    <div data-role="collapsible"> 
    <h3>Drugs</h3> 
    <p style="padding:0px; margin:0px;"> 
    <div data-role="fieldcontain"> 
     <div id="DrugsCBList"><!-- drugs loaded into here --></div> 
    </div> 
    </p> 
    </div> 
</div> 
</body 

Answer 1

如果是我，我不會使用pageinit事件。

$("link of the second page").click(function(){ 
window.location.hash="#second_page_id"; 

//put your initialization code here. 

setTimeout(function() { 
    $("#listviewid").listview("refresh"); 
}, 0); 
});