jqueryの$.getJSONの処理結果について
jqueryの$.getJSONの結果およびその違いについて教えてください。
以下の(1)と(2)の処理があり、(2)を(1)と同じ様に
出力したいと考えておりますが、(2)では(1)のように
「class="ui-li-static ui-body-inherit ui-first-child"」などが
設定されずに出力されてしまいます。
そのため、どのように記述すれば(1)と同じ結果になるのかを
ご教授いただけますでしょうか。
また、宜しければ(1)と(2)の処理の違いを
教えていただけると助かります。
※chrome バージョン 43.0.2357.81
apache-tomcat-7.0.53
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
(1)固定値で埋め込み
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var test1 = function(){
$('#listviewtest').append('<li>1:aaaaaaa</li>');
$('#listviewtest').append('<li>2:bbbbbbb</li>');
$('#listviewtest').append('<li>3:ccccccc</li>');
};
$(document).on("pagebeforecreate", function() {
test1();
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<ul id="listviewtest" data-role="listview">
</ui>
</div>
</div>
</body>
</html>
処理結果
<ul id="listviewtest" data-role="listview" class="ui-listview">
<li class="ui-li-static ui-body-inherit ui-first-child">1:aaaaaaa</li>
<li class="ui-li-static ui-body-inherit">2:bbbbbbb</li>
<li class="ui-li-static ui-body-inherit ui-last-child">3:ccccccc</li>
</ul>
(2)$.getJSONで読み込み
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var test1 = function(){
$.getJSON(
'test.js',
null,
function(data, status) {
var items = [];
$.each(data, function(key, val) {
items.push('<li>' + val.id + ':' + val.name + '</li>');
});
$('#listviewtest').append(items.join('')).trigger('create');
}
);
};
$(document).on("pagebeforecreate", function() {
test1();
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<ul id="listviewtest" data-role="listview">
</ul>
</div>
</div>
</body>
</html>
外部ファイル（test.js）
[
{"id":1,"name":"aaaaaaa"},
{"id":2,"name":"bbbbbbb"},
{"id":3,"name":"ccccccc"}
]
処理結果
<ul id="listviewtest" data-role="listview" class="ui-listview">
<li>1:aaaaaaa</li>
<li>2:bbbbbbb</li>
<li>3:ccccccc</li>
</ul>
補足
回答ありがとうございます。 1)は理解できたのですが、 2)がよくわかりません。 $(function(){ //現在のスクリプト }); の現在のスクリプトの部分にはどのように記述したらよいのでしょうか？