列中所有元素的引导弹出窗口？答案

【问题标题】：Bootstrap popover for all elements in a column?列中所有元素的引导弹出窗口？
【发布时间】：2017-02-05 02:44:11
【问题描述】：

我正在通过 ajax 调用动态生成一个表格，我希望特定列中的所有元素在悬停时显示一个弹出框。我在成功事件中有以下代码：

strBtn1 = '<span data-trigger="hover" data-placement="right" data-content="testing popovers in a table" class="test22">test</span>'
$('#myReport').append('<tr><td>Column 1</td><td>' + strBtn1 + '</td></tr>');

然后我在我的主脚本中尝试了这个：

$(".test22").each(function () {
    $(this).popover();
});

表格按我的预期生成，有 15 行，但将鼠标悬停在“测试”文本上没有任何作用。

我还有一种“控制”确实有效：

<span id="test11" data-trigger="hover" data-placement="right" data-content="testing popovers in a table">test</span>

直接在标头中的 HTML 文件中，并且在主脚本中：

$("#test11").popover();

所以在标题中我得到一个“测试”，当我悬停时会显示一个弹出框。

想法？

【问题讨论】：

所以我才弄清楚它为什么这样做，呃......它永远不会处理“每个”语句，因为元素不存在于 DOM 中......现在弄清楚如何修复它:)
用文档就绪处理程序包装它
是的。答案贴在下面:)

标签： jquery html ajax twitter-bootstrap

【解决方案1】：

您需要确保 $(".test22").each(function () { $(this).popover(); }); 仅在填充表后运行，否则它将无法找到任何类。

要测试它是否正常工作，请尝试在每个函数内放置一个控制台日志，以查看该函数实际执行了多少次。

如果您没有返回任何控制台日志，则意味着您必须尝试运行 each，然后才能进行任何迭代。

如果确实如此，那么我建议将每个 jQuery 放入一个函数中，然后在 ajax 成功中调用该函数。

【讨论】：

【解决方案2】：

成功解决了这个问题。

counter += 1;
tmpID = 'thisCell' + counter;
strBtn1 = '<span id="' + tmpID + '" data-trigger="hover" data-placement="right" data-content="testing popovers in a table" class="test22">test</span>'
$('#myReport').append('<tr><td>Column 1</td><td>' + strBtn1 + '</td></tr>');
$('#' + tmpID).popover();

然后我完全删除了“每个”语句。

【讨论】：