为什么当元素是通过 HTML 创建而不是通过 JavaScript 动态创建时，我的 Popover 可以工作？答案

【问题标题】：Why does my Popover work when elements are created via HTML but not dynamically via JavaScript?为什么当元素是通过 HTML 创建而不是通过 JavaScript 动态创建时，我的 Popover 可以工作？
【发布时间】：2025-12-04 11:00:02
【问题描述】：

我正在创建一种方法来添加多个如下所示的弹出框：

My first JsFiddle, working output （点击查看截图）

以上是我迄今为止在我的第一个 JsFiddle 中使用以下代码创建的内容：

Example 1 - Working!（现在是损坏的代码链接）

我在第二个 JsFiddle 中创建了完全相同的 DOM 元素（对 bootstrap、popper、material-icons、jquery 等的相同引用以及相同的 css 和 .popover() 函数和设置）但出于某种原因我的第二个示例不起作用。我确实在我的主站点上使用document.createElement() 元素制作了一个有效的弹出框，所以我不知道为什么这个不起作用.. 我已经在 JsFiddle 之外对此进行了测试，也没有好的结果。请帮忙！

我的第二个 JsFiddle 的链接：Example 2 - Sadly, not working! But why??（现在是损坏的代码链接）

编辑：这个可爱的人在帖子发布后不到半小时内就修复了我的代码！对此@MichaelWhinfrey 和 Stack Overflow 非常满意！这是我现在接受的答案：

似乎需要在创建元素后运行 popover 函数，在 $(document).ready() 中初始化它们可能是您想要的解决方案。我更新了你的小提琴以包含一个示例 jsfiddle.net/0cwe1v9y – Michael Whinfrey 25 分钟前 (2019-04-30 11:33:17Z)

【问题讨论】：

嗨！你可以试试this。还要尝试始终将您的代码放在您的帖子中。
也看到这个link
@NishargShah 谢谢，正在查看代码并注意到他在来自引导程序 4 API class="d-none" 的内容包装器 div 上使用了引导程序类，所以我尝试了同样的方法：我评论了 //div_uniqueId.style = "display:none;"; 和然后写了div_uniqueId.className = "d-none"; 但仍然没有修复，这很奇怪，因为我所有的 DOM 元素在运行时都在那里，但是当我点击我的弹出框图标时它们没有显示
@vickeycolors 谢谢，从现在开始会这样做！
@MichaelWhinfrey 你修复了我的代码，谢谢！！老实说，你为我节省了很多时间；我不会想到使用 '.popover-icon' 作为选择器！请务必发布答案，以便我可以正式接受，我非常乐意：D xx

标签： javascript jquery css bootstrap-4 jsfiddle

【解决方案1】：

使用 .popover-icon 选择器加载所有内容后重新应用弹出框似乎可以解决问题。

$(document).ready(function (){
  $(".popover-icon").popover({
        html: true,
        animation: true,
        placement: "right",
        trigger: 'focus',
        content: function() {
            var content = $(this).attr("data-popover-content");
            return $(content).children(".popover-body").html();
        }
    });
});

【讨论】：