Django中Bootstrap可关闭Alert组件关闭按钮失效问题求助

问题根源 #

你使用的Bootstrap Alert组件，其关闭按钮的data-dismiss="alert"功能依赖Bootstrap的JavaScript插件支持。如果没有正确引入所需的脚本文件，按钮就无法触发折叠关闭的效果。

具体修复步骤 #

• 引入必需的脚本文件
  根据你使用的Bootstrap版本选择对应的脚本：
  • Bootstrap 3版本：需要先引入jQuery，再引入Bootstrap的JS文件，建议放在页面底部</body>标签之前，确保DOM加载完成后执行：

    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    

  • Bootstrap 5版本：不再依赖jQuery，直接引入包含Popper.js的Bootstrap捆绑版JS即可：

    <script src="bootstrap.bundle.min.js"></script>
    

• 验证DOM结构正确性
  确认你的代码中alert-dismissible、close类名以及data-dismiss="alert"属性拼写无误，现有代码的结构是符合要求的。
• 手动绑定关闭事件（备选方案）
  若自动绑定失效，可通过原生JavaScript手动给关闭按钮添加事件，强制移除Alert元素：

  document.querySelectorAll('.close').forEach(button => {
    button.addEventListener('click', function() {
      this.closest('.alert').remove();
    });
  });
  

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