同一Modal加载双表单异常：重复切换后显示错误表单

不用单独创建多个modal容器，这几个方法就能解决你的问题：

1. 触发时清空模态框内容再加载 #

点击链接打开模态框前，先清空模态框的内容区域，再加载对应表单，彻底避免旧内容残留：

// 绑定addServizio链接点击事件
$('#addServizio').on('click', function(e) {
  e.preventDefault();
  // 先清空模态框内容
  $('#modal .modal-body').empty();
  // 加载目标表单
  $('#modal .modal-body').load('path/to/addServizio-form.html');
  // 打开模态框
  $('#modal').modal('show');
});

// 绑定selectLivello链接点击事件
$('#selectLivello').on('click', function(e) {
  e.preventDefault();
  $('#modal .modal-body').empty();
  $('#modal .modal-body').load('path/to/selectLivello-form.html');
  $('#modal').modal('show');
});

这里不需要依赖shown.bs.modal事件，直接在点击时处理内容替换，逻辑更直接。

2. 动态管理shown.bs.modal事件绑定 #

如果一定要用shown.bs.modal事件，每次打开前先解绑旧的事件，再绑定对应表单的加载逻辑：

$('#addServizio').on('click', function(e) {
  e.preventDefault();
  // 解绑之前的事件
  $('#modal').off('shown.bs.modal');
  // 绑定当前表单的加载事件
  $('#modal').on('shown.bs.modal', function() {
    $(this).find('.modal-body').load('path/to/addServizio-form.html');
  });
  $('#modal').modal('show');
});

$('#selectLivello').on('click', function(e) {
  e.preventDefault();
  $('#modal').off('shown.bs.modal');
  $('#modal').on('shown.bs.modal', function() {
    $(this).find('.modal-body').load('path/to/selectLivello-form.html');
  });
  $('#modal').modal('show');
});

注意用off('shown.bs.modal')清除之前的事件绑定，避免多个事件叠加触发。

3. 用data属性传递表单标识，统一处理事件 #

给两个链接添加自定义data属性，在统一的事件里判断要加载哪个表单，同时每次加载前清空内容：

<!-- 链接添加data-form属性 -->
<a href="#" id="addServizio" data-form="add">添加服务</a>
<a href="#" id="selectLivello" data-form="level">选择等级</a>

// 绑定所有模态框触发链接的点击事件
$('#addServizio, #selectLivello').on('click', function(e) {
  e.preventDefault();
  const formType = $(this).data('form');
  const modal = $('#modal');
  
  // 清空内容
  modal.find('.modal-body').empty();
  
  // 统一绑定shown事件，根据formType加载对应表单
  modal.off('shown.bs.modal').on('shown.bs.modal', function() {
    let formUrl = '';
    if (formType === 'add') {
      formUrl = 'path/to/addServizio-form.html';
    } else if (formType === 'level') {
      formUrl = 'path/to/selectLivello-form.html';
    }
    $(this).find('.modal-body').load(formUrl);
  });
  
  modal.modal('show');
});

这种方式代码更简洁，扩展性强，后续加新表单只需要加新的data标识和对应URL。

4. 预加载表单，切换显示状态 #

如果两个表单内容不大，可以提前把它们都放到模态框里，默认隐藏，点击链接时切换显示状态：

<!-- 模态框内容里放两个表单 -->
<div class="modal-body">
  <div id="addServizioForm" class="form-container" style="display:none;">
    <!-- 添加服务表单内容 -->
  </div>
  <div id="selectLivelloForm" class="form-container" style="display:none;">
    <!-- 选择等级表单内容 -->
  </div>
</div>

$('#addServizio').on('click', function(e) {
  e.preventDefault();
  // 隐藏所有表单，显示目标表单
  $('.form-container').hide();
  $('#addServizioForm').show();
  $('#modal').modal('show');
});

$('#selectLivello').on('click', function(e) {
  e.preventDefault();
  $('.form-container').hide();
  $('#selectLivelloForm').show();
  $('#modal').modal('show');
});

这种方式不需要异步加载，响应更快，适合表单内容固定的场景。

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