Bootstrap模态框点击datepicker触发重复show事件问题排查

问题场景回顾 #

你现在是用Bootstrap模态框通过AJAX动态加载内容，其中一个AJAX页面里有个用bootstrap-datepicker的日期输入框。但点击这个输入框选日期时，模态框的show.bs.modal事件会反复触发，导致脚本重复执行（比如你示例里反复添加“MODAL SHOW”文本）。尝试用modal.off()解决后，又出现新问题：关闭模态框再点其他链接，加载的还是旧内容，不是新链接对应的数据。

问题根源 #

1. 重复初始化datepicker：你在show.bs.modal事件回调里每次都执行$('.date-test').datepicker()，但没有先销毁已存在的datepicker实例。这会导致同一个输入框被多次绑定datepicker的事件逻辑，后续点击输入框时，这些重复绑定的事件可能意外触发模态框的show.bs.modal事件，让回调反复执行。
2. 事件触发时机冲突：show.bs.modal是在模态框即将显示时触发的，此时模态框的DOM还没完全稳定，在这个阶段初始化datepicker，容易引发事件冒泡或逻辑冲突，导致模态框的show事件被误触发。
3. modal.off()的副作用：直接调用modal.off()会移除模态框上所有的show.bs.modal事件监听，后续打开新链接时，原本负责加载对应AJAX内容的事件逻辑已经失效，自然只能显示之前残留的旧内容。

解决方案 #

1. 先销毁再初始化datepicker，避免重复绑定 #

每次初始化datepicker前，先调用destroy方法清除已有的实例，确保每个输入框只有一个datepicker实例：

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var modal = $(this)
  console.log('MODAL SHOW')
  // 先销毁旧实例，再初始化新的datepicker
  $('.date-test').datepicker('destroy').datepicker();
  $('.modal-body').prepend('<div><strong>MODAL SHOW</strong></div>')
});

2. 改用shown.bs.modal事件初始化datepicker #

shown.bs.modal是在模态框完全显示、DOM稳定后触发的，这个时机初始化datepicker能避免很多事件冲突：

$('#exampleModal').on('shown.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var modal = $(this)
  console.log('MODAL SHOWN')
  $('.date-test').datepicker('destroy').datepicker();
  $('.modal-body').prepend('<div><strong>MODAL SHOWN</strong></div>')
});

3. 阻止datepicker事件冒泡（可选） #

如果还是存在事件误触发的情况，可以给datepicker的输入框添加事件阻止冒泡，避免事件传递到模态框：

$('#exampleModal').on('shown.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var modal = $(this)
  console.log('MODAL SHOWN')
  $('.date-test').datepicker().on('click focus', function(e) {
    // 阻止事件冒泡到模态框元素
    e.stopPropagation();
  });
  $('.modal-body').prepend('<div><strong>MODAL SHOWN</strong></div>')
});

4. 模态框隐藏时清理内容（针对AJAX场景） #

因为你是动态加载AJAX内容，所以在模态框关闭时，要清空内容并销毁datepicker，避免旧内容残留：

$('#exampleModal').on('hide.bs.modal', function (event) {
  // 销毁datepicker实例
  $('.date-test').datepicker('destroy');
  // 清空模态框主体内容，为下次加载新内容做准备
  $('.modal-body').empty();
});

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