twitter-bootstrap 延迟后隐藏 Bootstrap 弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21241302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide Bootstrap popover after a delay
提问by Greg Pettit
I already check out this answer: Auto hide bootstrap popover, but it does not seem to cover my exact scenario.
我已经查看了这个答案：Auto hide bootstrap popover，但它似乎没有涵盖我的确切情况。
I initialize my popovers in the window load function like this:
我在窗口加载函数中初始化我的弹出窗口，如下所示：
$(window).load(function(){
$('#fileArea').popover({
selector: '[rel=popover]'
});
});
The trigger is a table row element. Normally when a user clicks a row, an item gets added to a queue. Rather than binding or unbinding a bunch of stuff, I set up two separate click handlers. One to handle table rows that do NOT have rel="popover"(and after executing the code, I then add the rel attribute!) and one to handle table rows that indeed have rel="popover"
触发器是一个表格行元素。通常，当用户单击一行时，一个项目会被添加到队列中。我没有绑定或解除绑定一堆东西，而是设置了两个单独的点击处理程序。一个处理没有的表行rel="popover"（在执行代码后，我然后添加 rel 属性！）另一个处理确实有的表行rel="popover"
This is all working dandy; the separate listeners successfully distinguish between the two types of clicks. Here's the code for showing a popup on elements with the valid rel attribute:
这一切都是花花公子；单独的侦听器成功区分了两种类型的点击。这是在具有有效 rel 属性的元素上显示弹出窗口的代码：
$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
var $this = $(this);
$this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
setTimeout(function() {$this.popover('hide')},3000);
});
So, the popovers are already "initialized" (sort of... using the selector parameter with the #fileArea as the actual listener), and then when the popover method is called, the parameters being passed in create a successful popover. The setTimeout also works!
因此，弹出窗口已经“初始化”（有点……使用带有 #fileArea 的选择器参数作为实际侦听器），然后当调用弹出窗口方法时，传入的参数会创建成功的弹出窗口。setTimeout 也有效！
But then I discovered that if the user clicks AGAIN, the popover will not appear. I suspect it has to do with passing in parameters rather than just calling the void method or passing the string 'show'. Unfortunately, I need to pass parameters rather than use the data- attributes to store the content.
但后来我发现，如果用户再次点击，弹出窗口将不会出现。我怀疑这与传入参数有关，而不仅仅是调用 void 方法或传递字符串“show”。不幸的是，我需要传递参数而不是使用数据属性来存储内容。
From console, if I select the row and then call $el.popover('show')on it, the popover appears again.
从控制台，如果我选择该行然后调用$el.popover('show')它，弹出窗口会再次出现。
My current thinking is that I need to figure out if the row already has a popover configured on it (not just initialized, but configured). However, I don't know how to find that out in order to create a conditional. The faked code would look something like this:
我目前的想法是，我需要弄清楚该行是否已经配置了一个弹出框（不仅已初始化，而且已配置）。但是，我不知道如何找到它以创建条件。伪造的代码看起来像这样：
$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
var $this = $(this);
if(/* popover is configured */) {
$this.popover('show');
} else {
$this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
}
setTimeout(function() {$this.popover('hide')},3000);
});
Anybody have ideas for detecting if a popover is configured? Any alternative ways of accomplishing my goal?
有人有检测是否配置了弹出窗口的想法吗？实现我的目标的任何替代方法？
回答by gilly3
Set a .data()value on the element when you initialize the popover:
.data()初始化弹出窗口时在元素上设置一个值：
$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
var $this = $(this);
if($this.data("popoverInitialized")) {
$this.popover('show');
} else {
$this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
$this.data("popoverInitialized", true);
}
setTimeout(function() {$this.popover('hide')},3000);
});
Or,instead of hiding the popover, destroy it:
或者，与其隐藏弹出框，不如销毁它：
$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
var $this = $(this);
$this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
setTimeout(function() {$this.popover('destroy')},3000);
});
Or,show the popover every time:
或者，每次都显示弹出窗口：
$('#fileArea').on('click', 'tbody [rel=popover]', function(e) {
var $this = $(this);
$this.popover({container: '#fileArea', placement: 'top auto', content:"This file has already been added to the queue."});
$this.popover('show');
setTimeout(function() {$this.popover('hide')},3000);
});
