ajaxで取得したJSONデータでテーブルを構築しようとしています。
$.getJSON('http://localhost:8000/list' , function(data) {
var tbl_body = '<div class="table-responsive"><table class="table table-hover"><tr><th>Description</th><th>Chez…</th><th></th><th></th></tr>';
$.each(data, function() {
var d = this[1];
var tbl_row = "<td>" + d['title'] + "</td>";
tbl_row += '<td><a href="#" data-html="true" data-toggle="popover" data-content="' + d['owner']['phone'] + '">' + d['owner']['name'] + '</a></td>';
tbl_body += "<tr>"+tbl_row+"</tr>";
});
tbl_body += "</table></div>";
console.log(tbl_body);
$("#liste").html(tbl_body).text();
});
JSON データは次のようになります。
[
[
0,
{
"title": "Why",
"author": "How",
"detailsUrl": null,
"owner": {
"name": "Ted",
"email": "test@example.org",
"phone": "098765645565"
},
"coverUrl": null,
"history": [
]
}
],
[
1,
{
"title": "Test",
"author": "Test",
"detailsUrl": null,
"owner": {
"name": "Fred",
"email": "test@example.org",
"phone": "98976567"
},
"coverUrl": null,
"history": [
]
}
]
]
しかし、テーブルで生成されたリンクをクリックしても何も起こりません。ブートストラップは手作業でプレーンな HTML を記述して動作するため、ブートストラップを正しく使用していると確信しています。逃げ方の問題だと思います。