使用ajax加载数据后正确重新加载和重新格式化Bootstrap Popover

Question

首先让我声明，有很多文章询问如何将 Ajax 调用的数据简单地加载到 Bootstrap 4.0

popover

；这个问题涉及一个稍微不同的主题。

我的

popover

遇到的问题是，加载后，该元素显示在页面上不寻常的位置，如下所示：

popover

不是在便签图标上方加载，而是出现在下方，并继续从屏幕上消失（其中应该有七个条目）。原因似乎是因为，当

popover

最初作为视图容器出现时，尚未加载任何内部数据/html - 一旦加载了该数据，

popover

就会显示它而不调整自身。我发现调整容器化视图的一个技巧是简单地滚动页面，这基本上会刷新

popover

本身。

便签按钮和

popover

容器的代码如下：

<script>
    $(function () {
        $('[data-toggle="popover"]').on('inserted.bs.popover', function (evt) {
            getViewNoteModal($(evt.target));
        });
    });
    function getViewNoteModal(caller) {
        var $caller = $(caller);
        var $noteContainer = $('#editNotes');
        // The $caller is used to retrieve parameters.
        ...
        $.ajax({
            // GetNoteViewer is a C# method that returns the view that goes into #editNotes.
            url: "@Url.Action("GetNoteViewer")",
            method: "GET",
            data: {
                // parameters...
            },
            success: function (data) {
                $noteContainer.html(data);
            }
        });
    }
</script>
...
<i class="fas fa-2x fa-sticky-note text-info show-dialog" data-placement="top"
    data-toggle="popover" data-html="true" data-trigger="click" 
    data-template='<div class=" popover card-primary" role="tooltip">
        <div class="arrow"></div>
        <h3 class="popover-header card-header"></h3>
        <div class="popover-body"></div>
    </div>'
   data-content="<div id='editNotes'>">
</i>

似乎最合乎逻辑的做法是手动

dispose

的

popover

并通过 Ajax 函数的

show

块内的

$('[data-toggle="popover"]').popover('show');

立即

success

它。这种方法的问题在于，处理

popover

也会删除其中的数据 - 并且只是“显示”它而不处理它会导致对

popover

的回调的无限循环。

此时，我非常接近让

popover

按其应有的方式显示，因为其中的所有功能都可以完美运行，并且内部视图的格式也按预期进行格式化。现在唯一的问题是让

popover

第一次出现在正确的位置，而无需采取任何技巧将其设置在正确的位置。

Answer 1

您正在切换 AJAX 回调中的内容，

$noteContainer.html(data);

- 但这显然还不够，无法让弹出窗口“重新调整”本身。

可以使用

update

方法让它重新计算自己的位置，https://getbootstrap.com/docs/4.6/components/popovers/#popoverupdate:

.popover('update')

更新元素弹出框的位置。

$('#element').popover('update')