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

Question

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

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

我在引导事件“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
      )

实际上，监听器再次被触发，随后调用承诺和关联的回调，事件的触发是有问题的，因为当然，模式已经显示，我不希望运行这些回调/承诺。

我添加了

return if event.dates

（

event.dates

是日期选择器事件特有的属性），以便在日期选择器触发模式显示事件时基本上短路此代码，但是当然，这是很hacky的，我'我想更好地理解为什么日期选择器本身会触发显示事件。潜在地，由于我的表演甚至侦听器与模态的类相关联，因此显示日期选择器的行为可能继承父模态的目标，并且本身可能是一个模态，即显示模态（日期选择器），并且由于日期选择器继承自父模态，事件触发就像“显示”父模态一样。我完全混淆了吗？ （其实现在我似乎更清楚了，但仍然需要了解如何修复。）

Answer 1

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

给出了解决方法

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

Answer 2

试试这个：

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

Answer 3

用这个

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

Answer 4

检查 show.bs.modal 事件顶部的 namspace，如果不匹配则返回。

modal.on('show.bs.modal', function(e) {
    if (e.namespace !== 'bs.modal') return;
});