Bootstrap 自定义弹出框不会在第一次点击时出现答案

【问题标题】：Bootstrap custom popover doesn't appear on first clickBootstrap 自定义弹出框不会在第一次点击时出现
【发布时间】：2019-06-22 09:37:54
【问题描述】：

实际上，我想在用户按下锚点后显示一个自定义弹出框，然后他可以选择一个项目，然后我会在它之后执行一些服务器操作。

问题是，在我第一次按下锚点后，没有任何反应，但如果我再次按下，就会显示便便。

如果用户按下背景，我会隐藏弹出框。

这是我从主播那里租来的功能

<script>
    function pop(id) {
        $("#" + id).popover({
            html: true,
            content: function () {
                return $('#popover-content').html();
            }
        });
    }
</script>

虽然这里是我要显示的弹出框的代码

 <li id="popover-content" class="list-group" style="display: none">
            <a href="#" class="badge badge-primary">CHIUSO</a>
            <a href="#" class="badge badge-success">RISOLTO</a>
            <a href="#" class="badge badge-warning">IN ATTESA</a>
            <a href="#" class="badge badge-danger">SCADUTO</a>
        </li>

【问题讨论】：

如何执行pop(id)函数？此函数只是在给定元素上注册弹出框，但不会打开它。
@Sebastian 实际上我设置在锚点“onclick(this.id);”上在动态创建的锚中

标签： javascript jquery html bootstrap-4 popover

【解决方案1】：

你试过这个 jQuery 脚本吗？

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

如图here。

告诉我们它是否有效。

【讨论】：

【解决方案2】：

$().popover({...}) 方法注册了弹出框，但尚未显示。因此，pop(id) 函数的第一次执行只会在元素上注册弹出框。

当您想在点击时显示弹出框时，您还必须在注册后以编程方式显示它，因此您的函数应该如下所示。

function pop(id) {
    // register the popover
    $("#" + id).popover({
        html: true,
        content: function () {
            return $('#popover-content').html();
        }
    });

    // show the popover
    $("#" + id).popover('show');
}

【讨论】：