Bootstrap Popover在导航栏中不起作用

Question

在导航栏区域中，我想添加一个关于按钮，单击该按钮时，会有一个弹出窗口，显示一些常规信息。但这不起作用

html

<li class="nav-item">
<button class="btn btn-outline-primary text-sm-center nav-link font-weight-bold" data-toggle="popover" title="About this page" data-content="Test" id="B_About">
About
</button>
</li>

和初始化脚本的脚本

$( document ).ready(function() {
    $('#B_About').popover({
    container: 'body'
  });
});

包括

bootstrap.min.js和bootstrap.bundle.min.js。

这里有什么问题吗？

Answer 1

深入研究问题之后，我发现它与event delegation链接，因为我的按钮是由脚本动态绘制的。

然后我按如下所示更改了脚本，它以某种方式工作得很好：

document.addEventListener('click', function (e) {
    if (e.target.id == 'B_About') {
        $('#B_About').popover();
    }
}, false);

我希望此页面对event delegation有很好的解释。