使用 jQuery 生成的表中的引导弹出窗口
Bootstrap popover in a table generated with jQuery
我正在尝试使用使用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 中工作。我想这是逃跑的问题。
一旦元素添加到 dom 中,您需要初始化插件
$.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();
$("#liste").find('a[data-toggle="popover"]').popover();
});
演示:小提琴
相关文章:
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- 基于窗口宽度jquery的函数的替代方法是什么
- Jquery Onclick将数据发送到新打开的窗口
- jQuery调整大小函数只适用于窗口
- 是否可以使用Jquery操作窗体的目标窗口
- 使用jQuery可以根据窗口大小更改滑块的css高度
- 弹出窗口-jQuery Mobile、Backbone.js和Require.js
- 如何将文本框弹出窗口(Jquery 工具提示或类似工具)添加到画布中的 Fabric JS 图像
- 如何在点击弹出窗口jQuery内应用悬停效果
- 如何关闭模型弹出窗口jquery
- 从新打开的窗口jquery中删除一个节点
- 可拖动的非模态弹出窗口Jquery Mobile
- 在弹出窗口Jquery(灯箱)中打开照片
- 将Modal定位到当前窗口-jQuery
- 什么是窗口?jQuery和窗口.美元的意思
- 在新的窗口jquery功能不工作
- 警告中心元素窗口(jQuery)
- 条形码扫描器触发下一个按钮点击事件和弹出窗口JQuery
- 如何从另一个弹出窗口中的链接调用弹出窗口.Jquery Mobile
- 如何重用剑道ui窗口jquery