Jquery移动动态列表在触发(创建)后不显示

Question

我希望有人可以帮助我解决我的问题，因为我还没有找到有类似问题的人......我有以下代码位于我的移动应用程序的第二页。第 2 页使用第 1 页中的链接打开，第 2 页将 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);  
});