在jQuery动态HTML内容中无法启动Bootstrap Modal的问题

你的动态Bootstrap Modal无法正常启动且无法隐藏，主要是以下几个问题导致：

核心问题1：缺少Bootstrap依赖 #

代码仅引入了jQuery，但Bootstrap Modal需要配套的CSS文件和JavaScript文件才能实现样式渲染与交互逻辑，这是Modal失效的根本原因。

核心问题2：data-target属性格式错误 #

Bootstrap的data-target需要指向带#的ID选择器，你当前代码里data-target='Crew' + itemID未添加#，导致无法匹配对应的Modal元素。

额外问题：重复生成元素 #

每次下拉框值变更时，未清空之前生成的按钮和Modal，会导致重复添加，影响使用体验。

修正后的完整代码 #

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<select class="form-select form-select-sm CrewCount min-w" id="crewCount">
  <option value="-1">Select Crew Count</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
</select>
<br/>
<br/>
<div class="container">
  <div id="divCrew">
  </div>
</div>

JavaScript部分 #

$("#crewCount").change(function() {
  var count = $('#crewCount :selected').val();
  // 清空之前生成的内容，避免重复
  $("#divCrew").empty();
  if (count === "-1") return;
  for (let i = 1; i <= count; i++) {
    bindDynCrew(i);
  }
});

function bindDynCrew(itemID) {
  var modalId = `Crew${itemID}`;
  var html = `<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#${modalId}">Open Modal</button>`;
  html += `<div class="modal fade" role="dialog" id="${modalId}">`;
  html += '<div class="modal-dialog">';
  html += '<div class="modal-content">';
  html += '<div class="modal-header">';
  html += '<button type="button" class="close" data-dismiss="modal">&times;</button>';
  html += `<h4 class="modal-title">Modal ${itemID} Header</h4>`;
  html += '</div>';
  html += '<div class="modal-body">';
  html += `<p>这是第${itemID}个动态生成的Modal内容</p>`;
  html += '</div>';
  html += '<div class="modal-footer">';
  html += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
  html += '</div>';
  html += '</div>';
  html += '</div>';
  html += '</div>';
  $("#divCrew").append(html);
}

关键修正点说明 #

• 补充Bootstrap依赖：添加了Bootstrap的CSS和JS文件，确保Modal的样式与交互逻辑正常加载。
• 修正data-target格式：将data-target的值改为#${modalId}，正确指向Modal的ID选择器。
• 清空重复内容：生成新元素前调用$("#divCrew").empty()，避免重复添加按钮和Modal。
• 完善Modal结构：补充了modal-body和modal-footer，让Modal的关闭按钮等交互元素完整。

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