将引导程序升级到最新版本4.5.2时,不显示popover

问题描述

当我们将bootstrap.js升级到最新版本时,弹出窗口不可见。

检查元素时该元素是可见的,但未在UI中显示。 我们已经添加了popper.min.js以及bootstrap-js升级

<a tabindex="0" role="button" class="btn btn-danger btn-block" data-bind="visible: testvisible" id="btnDeleteSource" data-container=".modal-body" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-html="true" title="Test Delete" data-content='<p>test</p><button type="button" role="button" class="btn btn-danger btn-block" ng-click="Test click" id="btnConfirmDeleteSource">Delete</button>'>Delete Configuration</a>

js文件

 function setupBootstrap() {
        $("[data-toggle=popover]").popover({ html: true })
            .click(function (ev) {
                $compile($(".popover.in").contents())($scope);
            });
        $("[data-toggle=tooltip]").tooltip({ container: "body" });
    }

我在bootstrap.min.js之前加入了popper.min.js,我认为其中包含Popper.js才能使弹出窗口起作用。 Popover正在呈现,正如我在控制台的HTML中看到的那样,它带有class = popover in fade bs-popover-bottom show类。它在早期版本的引导程序中正常运行,并且使用class = popover fade bottom in类进行渲染。 我没有在浏览器中看到任何控制台错误。 我只升级了bootstrap.js而不是bootstrap.css

此外,弹出框内使用的按钮单击不显示

我已经尝试了以下方法解决此问题,但仍然无法正常工作, 在JavaScript中手动调用了.popover()

$(function () {
$('[data-toggle="popover"]').popover() })

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)