Question

我目前正在调用一个脚本来动态地向我的popover添加内容，但是当用户再次单击以关闭它时，我不需要进行此调用。是否有可能获得状态并在可见时将其关闭？

这是我到目前为止所做的：

$('.knownissue').on('click', function() {

    var info = $(this).attr('id').substr(5).split(':');
    var el = $(this);

    // How do I check to see if the popover is visible
    // so I can simply close it and exit?

    $.post('functions/get_known_issues.php?tcid='+info[0]+'&tcdate=' + info[1], function(data) {
        if (data.st) {
            el.attr('data-content', data.issue);
            el.popover('toggle');
        }
    }, "json");

});

Answer 1

为避免搜索动态插入的标记，您可以执行以下操作：

在Bootstrap 2中：

var $element = $('.element-you-added-popup-to')
$element.data().popover.tip().hasClass('in')
// Or if you used '.tooltip()' instead of '.popover()'
$element.data().tooltip.tip().hasClass('in')

在Bootstrap 3中：

$element.data()['bs.popover'].tip().hasClass('in')
$element.data()['bs.tooltip'].tip().hasClass('in')

Answer 2

if($('.popover').hasClass('in')){
  // popover is visable
} else {
  // popover is not visable
}

Answer 3

默认情况下，隐藏和显示的事件在引导程序弹出窗口中可用。

＆＃13;

$('#myPopover').on('shown.bs.popover', function () {
  // do something…
})

＆＃13;

可以使用以下引导弹出窗口事件

＆＃13;

show.bs.popover	
shown.bs.popover
hide.bs.popover	
hidden.bs.popover

＆＃13;

请参阅文档bootstrap popovers了解详情

Answer 4

Bootstrap动态添加和删除弹出窗口的标记，因此您只需检查元素是否存在。

如果你进入Bootstrap示例页面：http://twitter.github.com/bootstrap/javascript.html#popovers，你可以用那里显示的大红色按钮切换他们的示例弹出窗口，上面写着“点击切换弹出窗口”

编写此jquery选择器以选择该popover元素（如果存在） $（ '＃popovers'）。找到（ 'H3'）。方程（5）的.next（）。找到（ '酥料饼'）

要检查它的状态（是否存在），请检查返回的元素集的长度是否为0.

因此，按下按钮切换其弹出窗口示例，然后在控制台中运行以下命令：

TOGGLE POPOVER ON

console.log( 
     $('#popovers').find('h3').eq(5).next().find('.popover').length === 0
); // false

TOGGLE POPOVER OFF

console.log( 
    $('#popovers').find('h3').eq(5).next().find('.popover').length === 0
); // true

PS - 希望你能写一个更好的选择器，因为你已经知道你需要检查页面上是否存在popover

编辑：link to jsfiddle HERE

Answer 5

对于Bootstrap 4.x

 $('a#aUeberschriftenJBi').click(function() {
    if ($('a#aUeberschriftenJBi').attr('aria-describedby')) {
        // popover is visable
    } else {
        // popover is not visable
        $('a#aUeberschriftenJBi').popover({
            placement: 'bottom',
            title: function() {
                return "Title";
            },
            content: function() {
                return "Content";
            }
        });
    }

    $('a#aUeberschriftenJBi').popover("show");
});

HTML

<a href="#" id="aUeberschriftenJBi" title=""><span><i class="fa fa-sticky-note"></i></span></a>

Answer 6

试试这个

if ($('#elementId').attr('aria-describedby')) {
  alert('Popover is Visible');
  $("#elementId").popover('hide'); // To Hide Popover

}else{
  alert('Popover is Hidden');
  $("#elementId").popover('show'); // To Display Popover
}

我可以获得twitter bootstrap popover的当前状态吗？

6 个答案: