使用弹出数据切换的 JS 中的问题设置属性

Question

我试图在将鼠标悬停在图标上时显示内容。当我在 HTML 中对其进行硬编码时，它工作正常。但是当我尝试通过 javascript 渲染相同的东西时，悬停时没有任何反应。

所以这在直接写在 HTML 中时有效：

<i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body" 
    data-toggle="popover" 
    data-html="true"
data-content="hello"i>

这行不通

    <!--html-->
    <i id="iconid"
class="ki flaticon2-information icon-lg ml-3 text-dark"
data-container="body" 
    data-toggle="popover" 
    data-html="true"
i>

<!--javascript-->
document.getElementById("iconid").setAttribute("data-content", "hello");

当我检查呈现的代码时，两种情况下的一切似乎完全相同，但在第二种情况下，悬停时什么也没有发生。

感谢您的帮助！

Answer 1

如果使用bootstrap，可能需要在JS操作元素后手动调用popover事件

$('[data-toggle="popover"]').popover()

我认为问题是，当您调用 JS 操作时，bootstrap 已经完成了元素的绑定事件。所以它落在了后面。

使用弹出数据切换的 JS 中的问题设置属性

Problem setting attribute in JS with popover data-toggle

html

javascript

hover

popover