bootstrap4 popover 不适用于 html答案

【问题标题】：bootstrap4 popover is not working with htmlbootstrap4 popover 不适用于 html
【发布时间】：2021-10-31 14:39:13
【问题描述】：

我突然用 4.6.0 更新了引导程序，我之前工作的弹出窗口停止工作。我也放置了 popper.min.js，但仍然无法解决我的问题。

<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery-migrate-3.3.2.min.js"></script>
<script src="~/Scripts/Tooltip/jquery.tooltipster.js"></script>   
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

<a class="btn btn-primary btn-xs" tabindex="0" id="btnUploadCOI" data-html="true" data-container="body" data-toggle="popover" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. Right?" style="display: inline-block;">Upload COI</a>    

<div id="divUploadCOI" style="display:none">
</div>

js代码

我可以通过检查上传 COI 按钮查看数据内容值，但看不到弹出框。

我花了一整天的时间来解决这个问题，请帮助我

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

    $('html').on('click', function (e) {
        if (typeof $(e.target).data('content') == 'undefined' &&
           !$(e.target).parents().is('.popover.in')) {
            $('[data-content]').popover('hide');
            $('#btnUploadCOI').attr("disabled", false);
        }
    });


    $(document).on("click", "#btnUploadCOI", function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $('#btnUploadCOI').attr("disabled", true);
            var url = '@Url.Action("GetProjectsByProviderID", "ServiceProviders")' + '?providerIDEN=' + $('#Provider_ID_EN').val();
            $('#divUploadCOI').load(url, function (response, status) {
                $("#btnUploadCOI").attr('data-content', response);
                $('#btnUploadCOI').popover('show');
                $('#btnUploadCOI').attr("disabled", true);
            });
    });

【问题讨论】：

标签： bootstrap-4 bootstrap-popover popper.js

【解决方案1】：

尝试使用 bootstrap bundle，它已经包含 popper。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<html>
<head>

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.2/jquery-migrate.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script>
    $(function () {
        $('[data-toggle="popover"]').popover();
    })

    $('html').on('click', function (e) {
        if (typeof $(e.target).data('content') == 'undefined' &&
           !$(e.target).parents().is('.popover.in')) {
            $('[data-content]').popover('hide');
            $('#btnUploadCOI').attr("disabled", false);
        }
    });


    $(document).on("click", "#btnUploadCOI", function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $('#btnUploadCOI').attr("disabled", true);
            var url = '@Url.Action("GetProjectsByProviderID", "ServiceProviders")' + '?providerIDEN=' + $('#Provider_ID_EN').val();
           // $('#divUploadCOI').load(url, function (response, status) {
                $("#btnUploadCOI").attr('data-content', "hello world");
                $('#btnUploadCOI').popover('show');
                $('#btnUploadCOI').attr("disabled", true);
           // });
    });
</script>
    </head>
  <body>

<a class="btn btn-primary btn-xs" tabindex="0" id="btnUploadCOI" data-html="true" data-container="body" data-toggle="popover" data-placement="bottom" data-content="And here's some amazing content. It's very engaging. Right?" style="display: inline-block;">Upload COI</a>    

<div id="divUploadCOI" style="display:none">
</div>

</body>
</html>

【讨论】：

$('[data-toggle="popover"]').popover({ sanitize: false }); 为我工作。但是，对于第一次单击弹出框不显示，为第二次单击显示。我应该如何解决这个问题？请帮忙。提前致谢。

【解决方案2】：

通过将sanitize: false 放入弹出框初始化 - 显示弹出框。

$('[data-toggle="popover"]').popover({
  sanitize: false
});

【讨论】：