如何在 JQuery DataTable 上动态创建引导弹出框

Question

所以我有一个表格，其中填充了来自 ajax 调用的数据。我只是使用与此类似的附加来填充它：

var table = //something

//loop through ajax response objects
table.append('<tr><td>' + ajaxAnswer[i].part1 + '</td><td>' + ajaxAnswer[i].part2 + '</td></tr>');

在循环之后，我正在初始化一个数据表，如下所示：

table.dataTable(
    //set the paging parameters
);

现在我想做的是，只要单击该表中的一行，就会发生一个弹出窗口。但是，弹出框将包含一些额外的数据（由另一个 ajax 调用加载）。我有用于捕获点击事件、拨打电话和组装所有数据的 jquery，但我似乎无法让弹出框正确发生。我尝试将它的语法添加到我附加的每一行中：

table.append('<tr class="popover-dismiss" data-toggle="popover"><td>' + ajaxAnswer[i].part1 + '</td><td>' + ajaxAnswer[i].part2 + '</td></tr>');

连同这个包裹在闭包中以处理弹出框的位（我希望弹出框在单击外部任意位置时消失，因此我根据此处的引导指南使用了焦点元素，http://getbootstrap.com/javascript/#popovers）：

$('.popover-dismiss').popover({
    trigger: 'focus'
});

但这似乎不起作用。可能是弹出框隐藏在我的数据表下方，因为我没有看到任何特定错误。所以现在我需要其他方式将其添加到我的行中，或者需要一种动态生成它们的方式。同样，我省略了处理我的生成事件的 jquery，因此如果我知道如何即时实例化它，我可以从那里抛出它。好像我在这里遗漏了一些微不足道的东西。感谢您的帮助！

更新：

Twitter Bootstrap Popovers not working for Dynamically Generated Content

我偶然发现了这篇关于动态生成弹出框的帖子（在过去的许多谷歌搜索之后终于有了一些相关的东西），这可能是我的问题。明天我回去工作时测试。

Answer 1

这最终成为我未来参考所需的答案（所有这些都在 jquery 函数中，用于处理我在行上的点击事件）：

$(row).popover({
    trigger: 'focus',
    title: 'YourTitleHere',
    html: 'true',
    content: blah,
    placement: 'top'
});
$(row).popover("toggle");

$(row) 是我设置弹出框的行对象，blah 是我想要的内容（在这种情况下，一些组成了 html div，但您可以通过删除html: 'true' 上面的参数）。

在我之前的尝试中，我根据需要使用了内容标签，但我没有最后一行来实际将弹出框切换到自己身上。这样做不需要添加到我要附加的行定义。

感谢我在原始帖子中链接的帖子，以指定弹出处理程序应该在哪里，以及这篇帖子 (Bootstrap popover content cannot changed dynamically) 中我缺少的切换部分来驱动它。