Bootstrap 5中如何手动隐藏所有Popover实例？解决代码报错

错误原因分析 #

你遇到的两个核心问题：

• 事件绑定写法错误：document.getElementById() 不支持直接传入回调函数，必须先获取元素，再通过addEventListener绑定点击事件。
• Popover实例方法调用错误：Bootstrap 5+的Popover实例本身提供了hide()方法，不需要用item.popover('hide')这种jQuery风格的调用方式，这是导致item.popover is not a function错误的直接原因。

修正后的完整代码 #

document.addEventListener('DOMContentLoaded', function () {
    var items = [];

    // 绑定添加Popover按钮的点击事件
    document.getElementById('addPopperButton').addEventListener('click', function () {
        var btn = document.createElement('button');
        btn.setAttribute('type', 'button');
        btn.innerText = 'Toggle popover';
        // 给按钮添加Bootstrap基础样式，方便识别
        btn.classList.add('btn', 'btn-primary', 'm-2');

        var item = new bootstrap.Popover(btn, {
            trigger: 'hover click',
            title: 'lorem text',
            content: 'lorem text'
        });

        items.push(item);
        document.body.appendChild(btn);
    });

    // 绑定关闭所有Popover按钮的点击事件
    document.getElementById('hideAllPopovers').addEventListener('click', function () {
        items.forEach(item => {
            // 直接调用Popover实例的hide方法
            item.hide();
        });
    });
});

关键修改说明 #

1. 事件绑定修正：将document.getElementById('xxx', 回调)改为document.getElementById('xxx').addEventListener('click', 回调)，这是原生JS绑定点击事件的标准写法。
2. 实例方法修正：把item.popover('hide')替换为item.hide()，Bootstrap的Popover实例直接内置了hide()、show()、toggle()等控制方法，直接调用即可。
3. 额外添加了Bootstrap按钮样式，让动态创建的按钮更直观易点击。

内容的提问来源于stack exchange，提问作者Jay