bootstrap-datetimepicker日期插件和bootstrap modal模态框冲突解决

在今天的开发中发现一个插件冲突的问题,使用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。根本原因就是这个日期插件他的事件名和模态框的事件名,方法名都相同了,导致了这个问题。

这就是我今天的分享!!!

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值