如何多次复用带默认状态的动态生成Bootstrap Modal？

我完全懂你遇到的这个困扰——动态生成的模态框第一次打开时输入框显示默认值1和2，但修改后关闭再打开，输入框居然还保留着之前的内容，没有回到初始状态对吧？咱们来拆解一下问题根源，然后给出可行的修复方案。

问题出在哪？ #

你当前的代码逻辑是点击按钮时把模态框HTML追加到页面，然后尝试绑定hidden.bs.modal事件来清空模态框容器。但这里有个关键错误：页面初始加载时，#modal-form这个元素根本不存在（它是点击按钮后才动态生成的），所以你一开始绑定的hidden.bs.modal事件完全没生效。结果就是模态框关闭后，旧的模态框元素还留在DOM里，下次点击按钮又追加了一个新的，而你看到的其实是旧的那个（被覆盖在下面或者优先级更高），所以输入框还是之前修改过的值。

修复方案：两种思路任选 #

思路1：修正动态生成逻辑，用事件委托处理关闭事件

这种思路适合你需要根据不同按钮生成不同模态框内容的场景，核心是确保事件能绑定到动态生成的元素上，并且每次生成前清理旧元素。

修改后的完整代码如下：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script> 

<div id="modal-area"></div> 
<button id="openModal1" type="button" class="btn btn-primary"> Open modal form </button>

<script>
$('#openModal1').on('click', function(){ 
  let x = ` <form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="modal-dialogLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="field1">Example label</label> <input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input"> </div> <div class="form-group"> <label for="field2">Another label</label> <input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button> </div> </div> </div> </form> `; 
  $("#modal-area").empty(); // 先清空容器，避免残留旧的模态框
  $("#modal-area").append(x); 
  $('#modal-form').modal('show'); // 明确调用show方法打开模态框
}); 

// 用事件委托绑定关闭事件，委托给已存在的父元素#modal-area
$('#modal-area').on('hidden.bs.modal', '#modal-form', function (event) { 
  $(this).remove(); // 直接移除当前关闭的模态框元素
}); 
</script>

关键修改点：

• 移除了按钮上的data-toggle="modal"和data-target="#modal-form"，避免和动态生成的元素冲突，改用JS手动控制打开
• 追加新模态框前先清空容器，确保没有旧元素残留
• 把事件绑定改成事件委托，让父元素监听动态子元素的关闭事件，这样不管模态框什么时候生成，事件都能生效

思路2：预渲染模态框，打开时重置输入值

如果你的模态框内容是固定的，这种思路性能更好——不用每次生成新的DOM元素，而是一开始就把模态框放在页面里，每次打开时重置输入框的值。

代码示例：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script> 

<!-- 预渲染模态框，默认隐藏 -->
<form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true"> 
  <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <h5 class="modal-title" id="modal-dialogLabel">Modal title</h5> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span> 
        </button> 
      </div> 
      <div class="modal-body"> 
        <div class="form-group"> 
          <label for="field1">Example label</label> 
          <input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input"> 
        </div> 
        <div class="form-group"> 
          <label for="field2">Another label</label> 
          <input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input"> 
        </div> 
      </div> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
        <button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button> 
      </div> 
    </div> 
  </div> 
</form> 

<div id="modal-area"></div> 
<button id="openModal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form"> Open modal form </button>

<script>
// 监听模态框即将打开的事件，重置输入框值
$('#modal-form').on('show.bs.modal', function () {
  $('#field1').val('1');
  $('#field2').val('2');
});
</script>

这种方式更简洁，也避免了重复DOM操作的开销，适合内容固定的模态框场景。

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