8

当通过执行以下操作选择新弹出框时，我试图隐藏所有其他弹出框：

我的 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'); 即使显示请求和消息弹出框，也永远不会显示，我做错了什么？

4

6 回答 6

22

Bootstrap 现在支持弹出事件 - 请参阅官方弹出文档中的事件部分（这里是文档更改日志）。

例子：

$('#requests')
.popover()
.on('show.bs.popover', function() { console.log('o hai'); })
.on('hidden.bs.popover', function() { console.log('ciao'); });
于 2014-10-17T02:45:52.450 回答
8

popover 插件不会触发任何事件。工具提示插件也没有（因为 popover 扩展了工具提示）。检查此问题（github）以获取替代方案。

您可以根据您的trigger. 对于您的示例：演示（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. 请参阅弹出文档（github）

您可以使用以下事件：

  • trigger: 'click'： 在click
  • trigger: 'hover': 显示mouseenter和隐藏mouseleave
  • trigger: 'focus': 显示focus和隐藏blur
  • trigger: 'manual': 使用你自己的代码来显示和隐藏
于 2012-10-25T22:44:43.047 回答
2

您可以通过使用类并拥有越来越多的组织代码轻松地做到这一点：

$(document).ready(function(){

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

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

在这里查看我的演示

如果您想在自定义此代码中进行表单控制：

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

在这里查看演示

于 2013-04-23T06:25:36.653 回答
1

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

show.bs.popover

我试过了，效果很好

于 2017-09-07T06:49:29.343 回答
0

试试这个：

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

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

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

于 2014-06-11T19:12:12.503 回答
0

这.on('shown')不是.on('show')

于 2016-10-19T19:18:52.420 回答