Twitter Bootstrap .on('show',function(){}); 不适用于popover

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事件 - 请参阅官方popover文档中的Events部分(这里是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扩展了工具提示).检查此问题(github)以寻找替代方案.

您可以根据自己的不同使用不同的JS事件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.查看popover doc(github)

您可以使用以下事件:

• trigger: 'click' : 上 click
• trigger: 'hover':显示mouseenter和隐藏mouseleave
• trigger: 'focus':显示focus和隐藏blur
• trigger: 'manual' :无论如何,使用您自己的代码来显示和隐藏