当我的模式已经打开时阻止 "show" 事件（脚本重新加载）

Question

我使用模态向用户动态加载内容（感谢 AJAX 和他点击的 link）

在我加载的 Ajax 页面之一上，我使用 bootstrap-datepicker 插件 (https://bootstrap-datepicker.readthedocs.io/en/latest/)

添加了一个日期字段

问题是当我点击输入添加日期时，好像模态正在重新加载，我无法阻止它

我创建了一个简单示例来说明问题（但突然在我的网站上，当我单击日期字段时，它会在 AJAX 处重新加载页面）

HTML:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        <input type="text" name="date_from" class="form-control date-test date-from" placeholder="" value="" autocomplete="off">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Javascript:

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var modal = $(this)

  //......

  console.log('MODAL SHOW')
  $('.date-test').datepicker();
  $('.modal-body').prepend('<div><strong>MODAL SHOW</strong></div>')
});

如您所见，当我们点击这个输入时，它会重新加载脚本并再次添加 "MODAL SHOW"

我试着在模态脚本中添加 modal.off();，如下所示：

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var modal = $(this)

  //......

  modal.off();
  console.log('MODAL SHOW')
  $('.date-test').datepicker();
  $('.modal-body').prepend('<div><strong>MODAL SHOW</strong></div>')
});

但问题是，如果用户关闭模态并单击另一个 link，它会重新加载与旧模态相同的模态（而它是另一个 link 和另一个数据）

问题出在哪里？

如何确保当我点击输入时，脚本不会认为我正在重新加载模态

Answer 1

添加以下代码应该有助于解决您的问题。

$(".date-test").datepicker().on('show.bs.modal', function(event) {
    // prevent datepicker from firing bootstrap modal "show.bs.modal"
    event.stopPropagation();

这是一个已知的错误帽子，与引导程序 datetimepicker 有关 https://github.com/uxsolutions/bootstrap-datepicker/issues/978

当我的模式已经打开时阻止 "show" 事件（脚本重新加载）

Block the "show" event when my modal is already open (the script reloads)

javascript

jquery

bootstrap-modal

bootstrap-datepicker

jquery-events