为什么bootstrap-datepicker显示的时候会触发'show.bs.modal'？

Question

我有一个模态，如下图所示，

当我 select 包含日期选择器的输入字段时， bootstrap 模态事件 .on('show.bs.modal') 被触发，这是非常有问题的，因为我正在合法显示模态时的各种异步操作。我认为模式已经显示，不应触发此事件。

我在 bootstrap 事件 'show.bs.modal' 上有一个监听器，如下所述，

  handleModalLaunch: () ->
    $(@modalClass).on 'show.bs.modal', (event) =>
      return if event.dates
      promise = new Promise ( (resolve, reject) =>
        @setModalData(event)
        if (@interactionData)
          resolve(@interactionData)
        else
          reject(false)
      )
      promise.then(
        (results) =>
          @trigger 'setRooms', @callBacks
          @trigger 'setStudentInfo', @callBacks
        (err) ->
          err
      )

实际上，侦听器再次被触发，随后调用 promise 和相关的回调，事件的触发是有问题的，因为模式已经显示，我不想要这些 callbacks/promise 是运行。

我添加了 return if event.dates（event.dates 是日期选择器事件独有的属性），以便在日期选择器触发模态显示的情况下基本上短路此代码事件，但当然，这是 hacky，我想更好地理解为什么 datepicker 本身会触发 show 事件。潜在地，因为我的 show even listener 绑定到模态的 class，显示日期选择器的行为可能继承父模态的目标并且可能本身就是模态，即显示模态（datepicker）由于日期选择器继承自父模态，因此事件触发时就好像父模态 'shown' 一样。我完全混淆了这个吗？（其实我现在好像更清楚了，但还是需要明白怎么修复。）

Answer 1

这是日期选择器库中的错误。您可以在 github here 上追踪它。 @kroeder

给出了解决方法

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

Answer 2

使用这个

$(date-picker-selector).on("show", function(e){
     e.preventDefault();
     e.stopPropagation();
}).on("hide", function(e){
     e.preventDefault();
     e.stopPropagation();
});

Answer 3

试试这个：

modal.on('show.bs.modal', function(e) {
    if (e.namespace === 'bs.modal') {
        // Your code here
    }
});

为什么bootstrap-datepicker显示的时候会触发'show.bs.modal'？

Why does bootstrap-datepicker trigger 'show.bs.modal' when it is displayed?

twitter-bootstrap

bootstrap-datepicker