Bootstrap模态框重开后Select框Change事件失效问题求助

问题描述 #

在Bootstrap模态框内为Select框绑定Change事件，选择“Reschedule”选项时会显示对应日期输入区域，并将日期字段设为必填。首次打开模态框时事件正常工作，但关闭模态框重新打开后，选择“Reschedule”选项时事件不再触发。模态框内容通过AJAX从独立文件加载，相关代码如下：

Select框相关代码 #

const date = document.getElementById('date');
$('#selector').on('change', function() {
  var divClass = $(this).val();
  $(".op").hide();
  $(" ." + divClass).slideDown('medium');
  const value = document.getElementById('selector').value;
  date.required = (value == "Reschedule");
});

.op {
  display: none;
}

<div class="row" style="margin-left:4px;">
  <div class="col-md-12">
    <div class="form-group row">
      <label class="col-sm-2 col-form-label" for="user_uid">Action</label>
      <div class="col-sm-10">
        <select name="agree" class="form-control" id="selector" required>
          <option value="" disabled selected>Select Action..</option>
          <option value="Accepted">Accept</option>
          <option value="Reschedule">Reschedule</option>
          <option value="Rejected">Reject</option>
        </select>
      </div>
    </div>
  </div>
</div>

<div class="row op Reschedule" style="margin-left:4px;">
  <div class="col-md-12">
    <div class="form-group row">
      <label class="col-sm-2 col-form-label " for="user_uid">Reschedule Datetime</label>
      <div class="col-sm-10">
        <input class="form-control" id="date" name="date" type="datetime-local" min="<?php echo date("Y-m-d"); ?>T00:00">
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

模态框加载代码 #

<a data-toggle="modal" data-target="#viewdata" data-id="' . $row['id_cdd'] . '" class="viewda dropdown-item" aria-label="Left Align" style="cursor:pointer" data-backdrop="static" data-keyboard="false" title="View"> View </a>

<div id="viewdata" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Candidate Detail</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <input type="hidden" class="form-control" id="idview" name="idview">
      <div class="modal-body body-view">
      </div>
    </div>
  </div>
</div>
<script>
$(document).on("click", ".viewda", function() {
  var myBookId = $(this).data('id');
  var myBook2 = $(this).data('session');
  $(".body-view #idview").val(myBookId);
  $.ajax({
    url: "cdd_inc_modal.php?view=" + myBookId+"&session="+myBook2,
    cache: false,
    success: function(result) {
      $(".body-view").html("");
      $(".body-view").html(result);
    }
  });
});
</script>

问题原因 #

每次打开模态框时，AJAX会重新渲染.body-view内的DOM内容。原来的事件绑定$('#selector').on('change', ...)是直接绑定到初始加载的#selector元素上的，当DOM被替换后，新生成的#selector元素并没有绑定该事件，导致事件无法触发。此外，初始代码中提前获取的date变量指向的是旧DOM中的元素，新DOM中的#date元素无法被正确操作。

解决方案 #

使用事件委托，将事件绑定到静态的父元素（如document或模态框的.body-view）上，这样即使动态元素被替换，事件依然能通过事件冒泡触发。同时，在事件内部实时获取当前的#date元素，避免操作旧DOM元素。

修改后的Select框Change事件代码：

$(document).on('change', '#selector', function() {
  var divClass = $(this).val();
  $(".op").hide();
  $("." + divClass).slideDown('medium');
  const date = document.getElementById('date');
  date.required = (divClass == "Reschedule");
});

额外优化建议 #

• 可以将事件委托的父元素更具体（比如.body-view），减少事件冒泡范围，提升性能：

  $('.body-view').on('change', '#selector', function() {
    // 内部逻辑不变
  });
  

• 模态框关闭时，可以清空.body-view的内容，避免旧元素残留：

  $('#viewdata').on('hidden.bs.modal', function() {
    $('.body-view').html('');
  });
  

内容的提问来源于stack exchange，提问作者Anis Septi Budiani