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

Question

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

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

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

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

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

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

seems like the popover function needs to be run after the elements are created, initialising them in a $(document).ready() may be the solution you're after. I updated your fiddle to include an example jsfiddle.net/0cwe1v9y – Michael Whinfrey 25 mins ago (2019-04-30 11:33:17Z)

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

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

Why does my Popover work when elements are created via HTML but not dynamically via JavaScript?

javascript

jquery

css

bootstrap-4

jsfiddle