Bootstrap提示框（Alert）二次点击添加按钮不显示问题求助

嗨，我来帮你搞定这个问题！你遇到的核心问题是Bootstrap默认的data-dismiss="alert"会直接把Alert元素从DOM中移除，所以第二次点击“添加到心愿单”时，找不到这个Alert元素了，自然弹不出来。另外我们还要加上自动关闭的逻辑，下面是完整的解决方案：

核心思路 #

• 不使用Bootstrap自带的data-dismiss，改用JavaScript控制Alert的显示/隐藏（保留DOM元素，不删除）
• 给“添加到心愿单”按钮绑定点击事件，每次触发时显示Alert，并启动自动关闭定时器
• 点击关闭按钮时手动隐藏Alert，同时清除自动关闭定时器

完整代码实现 #

HTML部分 #

<!-- 心愿单添加按钮 -->
<button id="add-to-wishlist" class="btn btn-primary">添加到心愿单</button>

<!-- 修改后的Alert组件 -->
<div class="alert alert-success d-none" id="success-alert">
  <button type="button" class="close close-alert">×</button>
  <strong>Success! </strong> Product have added to your wishlist.
</div>

注意：这里给Alert加了d-none类（Bootstrap的隐藏类），默认隐藏；移除了data-dismiss="alert"，给关闭按钮加了自定义类close-alert。

JavaScript部分 #

// 获取元素
const addBtn = document.getElementById('add-to-wishlist');
const successAlert = document.getElementById('success-alert');
const closeBtn = successAlert.querySelector('.close-alert');
let autoCloseTimer; // 存储自动关闭定时器ID

// 添加到心愿单按钮点击事件
addBtn.addEventListener('click', function() {
  // 显示Alert
  successAlert.classList.remove('d-none');
  successAlert.classList.add('show');
  
  // 清除之前的定时器（避免多次点击导致重复触发）
  clearTimeout(autoCloseTimer);
  
  // 设置自动关闭定时器（这里设为5秒，可自行修改）
  autoCloseTimer = setTimeout(function() {
    successAlert.classList.add('d-none');
    successAlert.classList.remove('show');
  }, 5000);
});

// 关闭按钮点击事件
closeBtn.addEventListener('click', function() {
  successAlert.classList.add('d-none');
  successAlert.classList.remove('show');
  // 清除自动关闭定时器
  clearTimeout(autoCloseTimer);
});

代码说明 #

1. 保留DOM元素：用d-none和show类控制显示隐藏，而不是删除元素，这样Alert可以重复调用
2. 定时器管理：每次显示Alert时先清除之前的定时器，防止多次点击后Alert提前关闭或者多次触发关闭
3. 手动关闭同步：点击关闭按钮时不仅隐藏Alert，还清除定时器，避免自动关闭逻辑继续执行

这样修改后，你的Alert既支持手动点击关闭，也会在5秒后自动关闭，而且每次点击“添加到心愿单”都能正常弹出啦！

内容的提问来源于stack exchange，提问作者Keerthi Reddy Yeruva