events - 引导模式和日期选择器显示事件

Question

当点击日期选择器（http://www.eyecon.ro/bootstrap-datepicker/）时，他的 SHOW 事件会触发，但模态的 SHOW.BS.MODAL 也会触发。哪里有问题？

$(document).ready(function() {
$('#ArrDate')
.datepicker()
.on("show", function(event){
    alert("Q");
});

$("#dlg3000to3100")
.on('show.bs.modal', function (event) {
    alert("W");
});

$("#dlg3000to3100")
.modal("show");
});

示例示例

谢谢

Answer 1

这似乎是日期选择器的错误（或功能？）。您可以做的是防止show.bs.modal事件到达对话框。

$('#ArrDate').on('show.bs.modal', function (event) {
    event.stopPropagation();
});

这将在日期选择器级别检测事件并停止事件传播，因此show.bs.modal不会“冒泡”到对话框。

Answer 2

另一种解决方法是在模态事件上将 show.bs.modal与shown.bs.modal交换。

modal.on('shown.bs.modal', function (event) {
               // Do something
            });

但是，如果无法将显示与显示或隐藏与隐藏交换，请使用命名空间检查

modal.on('show.bs.modal', function(e) {
    if (e.namespace === 'bs.modal') {
         // Do something
    }

});

Answer 3

有一个类似的问题，由日期选择器观看节目事件引起。

一种选择是在模式上使用显示的事件，但这在所有情况下都不是理想的

$('#dlg3000to3100').on('shown.bs.modal', function (event) {
    // modal code in here
});

更优雅的解决方案是检查事件的命名空间

$('#dlg3000to3100').on('show.bs.modal', function (event) {
    if(event.namespace !== 'bs.modal') return;
    // modal code in here
});

https://jsfiddle.net/bzh75tww/