Bootstrap可关闭Alert点击按钮显示后无法持久停留问题解决

嘿，这个问题我碰到过！问题出在这儿：你的按钮是type='submit'，点击它会触发表单的默认提交刷新行为——页面一刷新，刚显示的alert自然就没了，看起来就像只显示了1秒。

下面给你两种靠谱的解决方案：

方案1：原生JS搞定（无依赖） #

先阻止表单的默认提交动作，再手动显示alert就行：

<!-- 先给表单加个ID方便操作，alert默认隐藏 -->
<form id="docSaveForm">
  <button type='submit' id='submit' name='submit'>Save Document</button>
</form>
<div class='alert alert-warning alert-dismissible d-none' role='alert'>
  <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden="true">&times;</span>
  </button>
  文档已成功保存！
</div>

<script>
// 获取按钮和alert元素
const saveBtn = document.getElementById('submit');
const alertBox = document.querySelector('.alert');

saveBtn.addEventListener('click', function(e) {
  // 关键一步：阻止表单默认提交刷新
  e.preventDefault();
  
  // 显示alert
  alertBox.classList.remove('d-none');
  
  // 如果你真的需要提交表单数据，可以在这里用AJAX发送请求，比如：
  // fetch('/your-save-url', {
  //   method: 'POST',
  //   body: new FormData(document.getElementById('docSaveForm'))
  // }).then(res => {
  //   console.log('保存成功！');
  // });
});
</script>

方案2：jQuery版本（适合Bootstrap项目） #

如果你的项目已经用了jQuery和Bootstrap JS，代码会更简洁：

<form id="docSaveForm">
  <button type='submit' id='submit' name='submit'>Save Document</button>
</form>
<div class='alert alert-warning alert-dismissible d-none' role='alert'>
  <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden="true">&times;</span>
  </button>
  文档已成功保存！
</div>

<script>
$('#submit').on('click', function(e) {
  // 阻止默认提交
  e.preventDefault();
  // 显示alert
  $('.alert').removeClass('d-none');
  
  // 可选：用AJAX提交表单
  // $('#docSaveForm').serialize(); // 序列化表单数据
  // $.post('/your-save-url', $(this).serialize(), function() {
  //   $('.alert').removeClass('d-none');
  // });
});
</script>

偷懒小技巧 #

如果你根本不需要提交表单，只是点击按钮显示alert，那直接把按钮的type改成button就行，彻底避免默认提交行为：

<button type='button' id='submit' name='submit'>Save Document</button>

这样alert就会一直显示，直到你点击右上角的×关闭它啦！

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