Question

通过执行以下操作，我尝试在选择新的弹出窗口时隐藏所有其他弹出窗口：

我的HTML

a.btn#requests(rel='popover',data-placement='bottom',data-original-title='<b>Requests</b>',data-content='My content goes here')

我的Javascript

  $(function (){
    console.log('start');
    $('#requests').popover();
    $('#messages').popover();

  });

  //This doesn't work for some reason?
  $('#requests').on('show', function (e) {
    console.log('requests');
    $('#messages').popover('hide');
  });

  $('#messages').on('show', function () {
    console.log('messages');
    $('#requests').popover('hide');
  });

然而，我的console.log（'requests'）和console.log（'messages'）;即使请求和消息弹出窗口正在显示，我做错了什么？

Answer 1

Bootstrap现在支持popover事件 - 请参阅official popover docs（和here's the doc changelog）中的“事件”部分。

示例：

$('#requests')
.popover()
.on('show.bs.popover', function() { console.log('o hai'); })
.on('hidden.bs.popover', function() { console.log('ciao'); });

Answer 2

popover插件不会触发任何事件。工具提示插件也没有（因为popover扩展了工具提示）。检查this issue (github)是否有替代方案。

您可以根据trigger使用不同的JS活动。例如：Demo (jsfiddle)

$(function (){
    console.log('start');
    $('#requests').popover();
    $('#messages').popover();

    $('#requests').on('click', function (e) {
        console.log('requests');
        $('#messages').popover('hide');
    });

    $('#messages').on('click', function () {
        console.log('messages');
        $('#requests').popover('hide');
    });

});

为什么'click'？因为版本2.1.1的默认弹出触发器是click。见the popover doc (github)

您可以使用以下事件：

trigger: 'click'：click
trigger: 'hover'：显示在mouseenter上并隐藏在mouseleave
trigger: 'focus'：显示在focus上并隐藏在blur
trigger: 'manual'：使用您自己的代码来显示和隐藏

Answer 3

你可以通过使用类并使用越来越多的组织代码轻松地完成它：

$(document).ready(function(){

    $('.btn').popover();

    $('.btn').on('click', function (e) {
        $('.btn').not(this).popover('hide');
    });
});

检查我的demo here

如果你想让表单控件在里面自定义这段代码：

var mycontent = '<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'

$('.btn').popover({
        content:mycontent,
        trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});


   $('.btn').on('click', function (e) {
       $('.btn').not(this).popover('hide');
    });
});

检查demo here

Answer 4

根据https://getbootstrap.com/docs/3.3/javascript/#popovers-events，事件的名称是

show.bs.popover

我试过了，它运作良好

Answer 5

试试这个：

            $(document).on('click', function(e) {
                if (!$(e.target).is('[data-original-title]')) {
                    $('[data-original-title]').popover('hide'); 
                }
            });

            $(document).on('show.bs.popover', function(e) { 
                $('[data-original-title]').popover('hide'); 
            });

这会在整个文档上设置一个事件处理程序，如果它不是一个popover元素，它将隐藏所有的popovers。

此外，在事件show.bs.popover（在打开弹出窗口之前触发）它将隐藏所有其他。

Answer 6

.on('shown')而非.on('show')

Twitter Bootstrap .on（'show'，function（）{}）;不适用于popover

6 个答案: