Bootstrap .popover() 'show' & 'destroy' 无法正常工作

Question

当我在“手动”模式下使用引导弹出框时，“销毁”和“隐藏”无法正常工作。 当我使用隐藏和销毁时，弹出框不透明度更改为 0，但它没有将显示更改为无，这导致弹出框容器覆盖了它下面的内容。 否则，如果我使用“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();

删除弹出框

和

$('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 部分中选中“transitions”并且在支持转换的浏览器中进行测试，那么 destroy 事件将不起作用。这是因为 Bootstrap 在 jQuery 中查看 $.support.transition。如果这个值是“真实的”，Bootstrap 假定会有某种类型的 transitionEnd 事件，并且在收到这个事件之前不会分离弹出框。但是 Bootstrap 使用在其转换库中定义的自定义事件，因此永远不会触发 transitionEnd 调用。如果不想重新下载自定义库，转场代码在这里：transition code

Answer 3

如果您想隐藏弹出框，请改用：

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

Answer 4

用于引导弹出窗口的工作

<span class="pop-target">
      <a href="javascript:void(0);" rel="popover"........> </a>
    </span>



  $(".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();
 });