Bootstrap Modal关闭事件使用异常：绑定后功能失效

你的模态框关闭功能失效，核心问题集中在以下几点：

1. 按钮默认跳转行为干扰逻辑 #

点击#plan_templates按钮时，href="#"会触发页面默认跳转，打乱模态框的显示流程，同时可能影响事件绑定的正常执行。

2. Bootstrap 5属性不兼容 #

你使用了Bootstrap 3/4的data-toggle="modal"属性，Bootstrap 5中对应属性为data-bs-toggle；不过你已经通过JS手动调用modal("show")，这个属性可以直接移除，避免冲突。

3. 替换模态框内容时丢失关闭控件 #

点击.tplan时，你直接替换了.modal-content的全部HTML，这会彻底覆盖模态框头部的关闭按钮（如btn-close元素），导致没有关闭入口，自然无法触发hidden.bs.modal事件。

修复后的完整代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<a class="btn btn-success" href="#" id="plan_templates">Add Plan Template</a>

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" id="planModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Plan Template</h5>
        <!-- 固定保留关闭按钮，不参与内容替换 -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <!-- 单独用容器承载可替换内容 -->
      <div class="modal-body">
        <div class="tplan">
          模板1初始内容
        </div>
        <div></div>
        <div class="tplan">
          模板2初始内容
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 准备待替换的内容容器 -->
<div class="tab" style="display:none;">
  模板1替换内容
</div>
<div class="tab" style="display:none;">
  模板2替换内容
</div>

JS部分 #

$("#plan_templates").click(function(e) {
  // 阻止页面默认跳转行为
  e.preventDefault();
  $("#planModal").modal("show");
  console.log("hello1");
});

$(".tplan").click(function() {
  var index = $(".tplan").index(this);
  // 仅替换模态框主体内容，保留头部关闭按钮
  $('#planModal .modal-body').html($('.tab').eq(index).html());
});

$("#planModal").on("hidden.bs.modal", function() {
  console.log('hello2');
  // 可选：关闭后恢复模态框初始内容
  $('#planModal .modal-body').html(`
    <div class="tplan">
      模板1初始内容
    </div>
    <div></div>
    <div class="tplan">
      模板2初始内容
    </div>
  `);
});

关键修复细节 #

• 给模态框添加唯一IDplanModal，避免类选择器引发的潜在冲突
• 通过e.preventDefault()阻止按钮的默认跳转行为
• 将内容替换目标从.modal-content改为.modal-body，保留关闭按钮的完整性
• 移除冗余的旧版Bootstrap属性，避免版本兼容问题
• 可选添加关闭后的内容重置逻辑，保证每次打开模态框的初始状态一致

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