Bootstrap 5 toast无法自动隐藏、关闭按钮无响应如何解决

两个版本适配错误直接导致你遇到的问题：

• API调用方式完全错误：你用的是Bootstrap 4的jQuery风格API，Bootstrap 5从底层移除了jQuery依赖，不再支持$(selector).toast()这种挂载在jQuery原型上的组件调用方法。你写的$('#companyUpdOK').show()是jQuery自带的元素显示方法，只会强制把Toast元素设为可见，完全没有触发Bootstrap Toast组件的初始化逻辑，自然不会绑定自动隐藏计时器、关闭按钮事件。
• 配置属性命名错误：Bootstrap 5所有组件的data配置属性都要求加bs前缀，你写的data-autohide、data-delay是Bootstrap 4的命名规范，5版本不会识别这两个属性，所以哪怕初始化正确也读不到你配置的自动隐藏、延迟参数。

1. 修正HTML属性 #

把所有组件相关的data属性补上bs前缀，修正后代码：

<div class="row">
    <div class="toast" id="companyUpdOK" role="alert" data-bs-delay="5000" data-bs-autohide="true" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">操作提示</strong>
            <small>刚刚</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="关闭"></button>
        </div>
        <div class="toast-body">
            企业信息更新成功
        </div>
    </div>
</div>

不需要额外给toast元素加style="display:none"，Bootstrap 5的内置样式默认会隐藏未激活的toast。

2. 替换JS调用逻辑 #

使用Bootstrap 5原生的组件实例API调用，不要混用jQuery的元素显示方法：

// 获取toast的DOM元素，初始化组件实例
const companyToast = new bootstrap.Toast(document.getElementById('companyUpdOK'));

// 需要弹出提示时，调用组件实例的show方法
companyToast.show();

如果习惯用jQuery选择器，也可以按下面的方式写，只要取到原生DOM对象传给Bootstrap构造函数即可：

// 注意取jQuery对象的第一个原生DOM元素
const companyToast = new bootstrap.Toast($('#companyUpdOK')[0]);
companyToast.show();

3. 依赖检查 #

• 确认页面引入的Bootstrap JS版本为5.x系列，禁止混引Bootstrap 4的JS文件
• 确认Bootstrap JS文件的引入顺序在你自己写的业务JS代码之前
• 不要重复引入jQuery版的Bootstrap组件插件，会覆盖全局bootstrap对象导致组件异常。

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