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

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

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

如果您访问 Bootstrap 示例页面：http://twitter.github.com/bootstrap/javascript.html#popovers，您可以使用其中显示的红色大按钮来切换示例弹出窗口，该按钮显示“单击以切换弹出窗口”

这个 jquery 选择器被编写为选择该弹出窗口元素（如果存在） $('#popovers').find('h3').eq(5).next().find('.popover')

要检查其状态（存在或不存在），请检查返回的元素集的长度是否为 0。

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

打开弹出窗口

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

关闭弹出窗口

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

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

编辑：链接到 jsfiddle 这里