在今天的开发中发现一个插件冲突的问题,使用bootstrap-datetimepicker日期插件,选择日期的时候触发了模态框hide.bs.modal隐藏事件,开始不知道,真的一脸茫然,后来自己找了非压缩版来debugger,发现,这个日期插件在选择完,并执行隐藏日期选择框之后,还会执行父节点的hide事件,如果我们的代码中在模态框的hide事件中还加入了一些逻辑,那么就会出现很多莫名其妙的事情。
这里解决办法就是
$(".modal").on('hide.bs.modal',function(e){
//这里加上判断解决问题
if($(e.target).attr("id") !== 你模态框的id){
return
}
.....你自己的逻辑
});
bootstrap的模态框功能都有一个id,那么我们可以通过这个返回的EVENT对象上的一些属性方法来判断是不是关闭模态框触发的这个事件,还是因为插件冲突触发的这个事件,我这里就选择了model的id,如果是冲突触发,那么e.target就是日期选择框的Dom,如果是正常关闭触发,这个e.target就是整个modal的Dom。根本原因就是这个日期插件他的事件名和模态框的事件名,方法名都相同了,导致了这个问题。
这就是我今天的分享!!!