动态添加的引导弹出窗口不起作用

Question

我发现了一些类似的问题，但仍然可以让它发挥作用。所以我知道如果你在按钮点击时添加一些 html 内容，jQuery 不会监听它。但在我的情况下，我不知道如何解决这个问题。希望有人能帮忙。如果您单击第一个“我的弹出框”，它就可以工作。同样在红色按钮上。但是，如果您使用“单击我”按钮添加新的“我的弹出框”，则新的“我的弹出框”不起作用。

编辑：每个弹出框都有自己独特的动态创建的内容。所以我不能为所有人提供一种内容。

这里是小提琴jsfiddle

这是我的“按钮”

<span class="mypopover" data-html="true" data-toggle="popover" title="Title" data-content="Content">
  my popover
</span>

这里是我的 popover js 点击功能

$(".mypopover").popover({
  trigger: "click",
  sanitize: false,
  html: true,
  animation: true,
  container: "#mycontainer",
});

$(document).on("click", ".mypopover", function (event) {
  event.stopPropagation();
});

$(document).on("click", function () {
  $(".mypopover").popover("hide");
});

Answer 1

当您调用时，$(".mypopover").popover(...)您将 popover 添加到所有具有 class 的现有元素mypopover。为了让 popover 处理动态添加的元素，您必须再次执行相同的代码。但幸运的是有更好的解决方案：

您可以通过以下方式初始化 popoverbody并使用selectorpopover 构造函数的属性：

$("body").popover({
        trigger: "click",
        sanitize: false,
        html: true,
        animation: true,
        selector: '.mypopover',
        container: '#mycontainer',
    });

这是小提琴。