javascript - 使用 jQuery 生成的表中的 Bootstrap 弹出窗口

Question

我正在尝试使用通过 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": [
      ]
    }
  ]
]

但是当我单击表中生成的链接时，没有任何反应。我确信我正确使用了 bootstrap，因为它可以手动编写纯 HTML。我猜这是转义的问题。

Answer 1

将元素添加到 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();
});

演示:Fiddle