同様の問題を抱えている人をまだ見つけていないので、誰かが私の問題を解決してくれることを願っています...モバイルアプリの2ページ目に次のコードがあります。2 番目のページは 1 番目のページからのリンクを使用して開き、2 番目のページは 2 つの JSON 文字列をリストビューとフィールドセットにロードします。
私の問題は、ページの最初の読み込み時に動的 html が適切な領域に挿入されないことですが、ページを更新すると html/data が挿入されます。
私は何が欠けていますか？ページロードなどの別の方法を使用してデータをロードしようとする必要がありますか?
<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