当我的模式已经打开（脚本重新加载）时，阻止“显示”事件

Question

我使用模式将内容动态地加载到用户（感谢AJAX和他单击的链接）

在我加载的一个Ajax页面上，我添加了带有bootstrap-datepicker插件（https://bootstrap-datepicker.readthedocs.io/en/latest/）的日期字段

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

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

http://jsfiddle.net/1L32hyzt/

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>')
});

但是问题是，如果用户关闭模态并单击另一个链接，它将重新加载与旧模态相同的模态（而它是另一个包含其他数据的链接）

问题来自哪里？

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

Answer 1

添加以下代码应该可以解决您的问题。

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

这是已知的错误帽，与引导日期时间选择器有关https://github.com/uxsolutions/bootstrap-datepicker/issues/978