Question

我希望有人可以帮我解决我的问题，因为我还没有找到有类似问题的人......我的移动应用程序的第2页有以下代码。使用第1页的链接打开第2页，第2页将2个JSON字符串加载到listview和fieldset中。

我的问题是，在首次加载页面时，动态html不会注入相应的区域，但如果我刷新页面，则会注入html / data。

我错过了什么？我应该尝试使用不同的方法加载数据，例如pageload等吗？

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

触发器（创建）后Jquery Mobile动态列表没有显示？

1 个答案: