Bootstrap .popover（）'show'& '破坏'不能正常工作 [英] Bootstrap .popover() 'show' & 'destroy' not working properly

问题描述

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

When I use the bootstrap popover in 'manual' mode 'destroy' and 'hide' not working properly. When I'm using hide and destroy, popover opacity changing to 0 but its not changing display to none, which resulting that the popover container cover the content bellow it. Otherwise if I use 'toogle' mode it's working properly.

我的代码：

$('[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');
});

推荐答案

我的临时解决方案如下：

My temporary solution look like this:

我正在使用：

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

删除popovers

to 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');
    }
});

切换弹出窗口

这篇关于Bootstrap .popover（）'show'& '破坏'不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！