Question

我正在创建一种方法来添加多个看起来像这样的弹出窗口：

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（）可能是您想要的解决方案。我更新了您的小提琴，在25分钟前（2019-04-30 11：33：17Z）包含了一个示例jsfiddle.net/0cwe1v9y – Michael Whinfrey

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为何起作用？

1 个答案: