Twitter Bootstrap .on('show',function(){});不适用于popover
我试图通过执行以下操作来隐藏所有其他弹出窗口:
I am trying to hide all other popovers when a new popover is selected by doing the following:
我的HTML
a.btn#requests(rel='popover',data-placement='bottom',data-original-title='<b>Requests</b>',data-content='My content goes here')
我的Javascript
My 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');即使请求和消息弹出窗口正在显示,我还没有显示出来,我做错了什么?
However, my console.log('requests') and console.log('messages'); is never getting shown even though the requests and messages popovers are showing, what am I doing wrong?
popover插件没有触发任何事件。工具提示插件也没有(因为popover扩展了工具提示)。查看此问题(github)以了解替代方案。
The popover plugin doesn't trigger any event. Neither does the tooltip plugin (since popover extends tooltip). Check this issue (github) for alternatives.
您可以根据触发器
使用不同的JS事件。例如: Demo(jsfiddle)
You can use different JS events depending on your trigger
. For your example : 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');
});
});
为什么'点击'
?因为版本2.1.1的默认弹出式触发器是,单击
。请参阅 popover doc(github)
Why 'click'
? Because the default popover trigger for version 2.1.1 is click
. See the popover doc (github)
您可以使用以下事件:
-
触发器:'click'
:在上点击
-
触发器:'hover'
:显示在mouseenter
并隐藏在mouseleave
-
触发器: '焦点'
:显示焦点
并隐藏模糊
-
触发器:'manual'
:使用您自己的代码来显示和隐藏
-
trigger: 'click'
: onclick
-
trigger: 'hover'
: display onmouseenter
and hide onmouseleave
-
trigger: 'focus'
: display onfocus
and hide onblur
-
trigger: 'manual'
: use your own code to display and hide anyway