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>
お礼
早速に有難うございました。 live でクリック動作が起きることを確認いたしました。 お時間のある時に、簡単な解説をお願いいたします。