Twitter Bootstrap .on('show',function(){});不适用于弹出窗口答案

【问题标题】：Twitter Bootstrap .on('show',function(){}); not working for popoverTwitter Bootstrap .on('show',function(){});不适用于弹出窗口
【发布时间】：2012-10-25 16:27:30
【问题描述】：

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

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

【问题讨论】：

它不在 onDomReady 调用中的事实如何：$(function (){})？
我试过了，但这并没有改变任何东西 - 根据我的理解，它不应该存在。

标签： javascript twitter-bootstrap

【解决方案1】：

Bootstrap 现在支持弹出事件 - 请参阅 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'); });

【讨论】：

【解决方案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' : 使用你自己的代码来显示和隐藏

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

show.bs.popover

我试过了，效果很好

【讨论】：

【解决方案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'); 
            });

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

很棒的评论，我认为这对于 twitter bootstrap 来说可能是新的。这是一个非常过时的问题。