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