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
);

现在，我想做的是，只要点击该表中的某行，就会发生弹出窗口。但是，popover将包含一些额外的数据（由另一个ajax调用加载）。我已经获得了用于捕获点击事件，拨打电话和汇总所有数据的jquery，但我似乎无法正确地使用popover。我尝试将其语法添加到我追加的每一行，如下所示：

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'
});

然而，这似乎并没有起作用。可能是因为我没有看到任何特定错误，所以popover被隐藏在我的数据表下面。所以现在我需要一些其他方式将它添加到我的行或一种动态生成它们的方式。再一次，我遗漏了处理我的生成事件的jquery，所以如果我知道如何在运行中实例化它，我可以从那里抛出它。好像我在这里错过了一些微不足道的东西。谢谢你的帮助！

更新

Twitter Bootstrap Popovers not working for Dynamically Generated Content

我发现这篇关于动态生成弹出窗口的帖子（最后是许多过去谷歌搜索后的相关内容），这可能是我的问题。我明天回去工作时会测试。

Answer 1

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

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

$(row)是我的行对象，我正在设置弹出窗口，blah是我想要的内容（在这种情况下，有些形成了html div，但你也可以这样做删除上面的html: 'true'参数文本。

在我之前的尝试中，我已经根据需要使用了内容标记，但是我没有最后一行来实际切换到我自己的popover。这样做不需要添加我正在追加的行定义。

归功于我在原始帖子中链接的帖子，用于指定弹出处理程序应该在哪里以及此帖子（Bootstrap popover content cannot changed dynamically）用于我错过的切换部分以驱动它。

如何动态地在JQuery DataTable上创建Bootstrap Popover

1 个答案: