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

Question

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

编辑：每个弹出窗口都有自己动态创建的独特内容。所以我不能一个内容包罗万象。

这里是fiddlejsfiddle

这是我的“按钮”

<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(...) 时，您使用 class mypopover 将弹出窗口添加到所有现有元素。为了让 popover 对动态添加的元素起作用，您必须再次执行相同的代码。但幸运的是有更好的解决方案：

您可以在 body 上初始化 popover 并按以下方式使用 popover 构造函数的 selector 属性:

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

Here 是 fiddle。

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

Dynamically added bootstrap popover not working

javascript

twitter-bootstrap

bootstrap-popover

bootstrap-4