Question

我通过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();

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

想法？

Answer 1

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

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

如果你没有得到任何控制台日志，那么这意味着你必须在有任何东西需要迭代之前尝试运行每个日志。

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

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

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

列中所有元素的Bootstrap popover？

2 个答案: