当 Bootstrap 5 弹出窗口不可见时，如何更新它？

Question

我正在使用 Bootstrap 5.3，我想在弹出窗口不可见时更新它的内容。这在第一次显示之前就有效，但是一旦第一次隐藏，它似乎可能会从 DOM 中删除。此后我无法使用选择器找到它。

是否有推荐的方法让 JS 可以访问弹出窗口，即使它们不可见？有很多方法可以使用弹出窗口，所以这里是我正在做的一个简短示例：

<span id="my-popover-trigger" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="click">click me</span>

<div id="my-connector-popover-host" style="display:none">
    <div id="my-popover">
        content goes here
    </div>
</div>

<script>
    $(function() {
        $('#my-popover-trigger').popover({animation: false, html: true, content: $('#my-popover')});
    });
</script>

我可以在第一次隐藏之前使用

$('#my-popover')

访问我的弹出窗口内容，但之后就不行了。

Answer 1

我必须查看 Bootstrap 源代码来确认 - 但弹出窗口内容确实已从 DOM 中删除（在 tooltip.js

hide()

中）。 Popover 对象保留对其的引用，以便稍后再次显示。

所以我只需要保留对它的引用（例如在全局变量

var myPopover = $('#my-popover')

中），以便在第一次隐藏它后更新它。