Bootstrap .popover（）’show’和’destroy’无法正常工作

当我在’手动’模式下使用bootstrap popover’destroy’和’hide’不能正常工作时。 当我使用hide和destroy时，popover opacity更改为0，但不会将显示更改为none，这会导致popover容器覆盖下面的内容。 否则，如果我使用’toogle’模式，它可以正常工作。

我的代码：

$('[rel="popover"]').popover({ html: true, placement: 'auto', container: 'body', trigger: 'manual' }); $('body').on('click' , '[rel="popover"]' , function(e){ e.stopPropagation(); $(this).popover('toggle'); }); $('body').on('click' , '.popoverClose' , function(e){ e.stopPropagation(); var i = $(this); $('.inputInfo').filter('[data-info-id="' +i.data('info-id')+ '"]').popover('hide'); }); // new code $('body').on('click', function(){ $('[rel="popover"]').popover('hide'); }); 

Answer 1

我的临时解决方案如下所示：

我正在使用：

 $('.popover').remove(); 

删除popovers

和

 $('body').on('click' , '[rel="popover"]' , function(e){ e.stopPropagation(); var i = $(this); var thisPopover = $('.popoverClose').filter('[data-info-id="' +i.data('info-id')+ '"]').closest('.popover'); if( thisPopover.is(':visible') ){ $('.popover').remove(); } else{ $(this).popover('show'); } }); 

切换弹出窗口

Answer 2

如果您使用自定义构建的Bootstrap，如果您没有在JS部分中检查“过渡”并在支持过渡的浏览器中进行测试，则destroy事件将不起作用。 这是因为Bootstrap在jQuery中查看$ .support.transition。 如果此值为“truthy”，则Bootstrap假定将存在某种transitionEnd事件，并且在收到此事件之前不会分离popover。 但Bootstrap使用其转换库中定义的自定义事件，因此永远不会触发transitionEnd调用。 如果您不想重新下载自定义库，则转换代码位于： 转换代码

Answer 3

如果你想要隐藏popover，请改用：

 $('.inputInfo').filter('[data-info-id="' +i.data('info-id')+ '"]').click(); 

Answer 4

为bootstrap popover工作

     $(".pop-target a").popover('hide'); 

Answer 5

我已经通过在css文件中添加它来修复它：

 .popover.fade{z-index:-1;} .popover.in{z-index: inherit} 

Answer 6

 //Works for hover events: $('[data-toggle="popover"]').popover(); $('[data-toggle="popover"]').mouseleave(function(e) { e.stopPropagation(); $(this).find('.popover').remove(); });