jQuery 如何使用弹出框内的按钮关闭引导弹出框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16226474/
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
How can i close a bootstrap-popover with a button inside the popover?
提问by XT_Nova
I have made a jsFiddlewhere i use twitter bootstrap popover function on an icon.
我制作了一个jsFiddle，我在一个图标上使用了 twitter bootstrap popover 函数。
<div style="margin-top:200px">
<ul>
<li class="in-row">
<a href="#" id="meddelanden" data-title="Meddelanden" data-toggle="clickover"
data-placement="right"><i class="icon-globe"></i></a>
</li>
</ul>
</div>
jquery:
查询：
var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
'<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
'<button id="close-popover" class="btn btn-small btn-primary pull-right">Close please!</button>';
$('#meddelanden').popover({animation:true, content:elem, html:true});
I do not seem to be able to close the popover with the button inside it. I have tried making a jquery click function on the id "close-popover" but noting happens. (I did not include my attempt to close it inside the jsfiddle)
我似乎无法用里面的按钮关闭弹出框。我曾尝试在 id“close-popover”上创建一个 jquery 点击功能，但注意到发生了。（我没有在 jsfiddle 中尝试关闭它）
Any suggestions for how you can close a popover with a button inside the popover?
关于如何使用弹出框内的按钮关闭弹出框的任何建议？
Regards, Bill
问候， 比尔
采纳答案by PSL
Try this:- http://jsfiddle.net/6hkkk/
试试这个：- http://jsfiddle.net/6hkkk/
var elem = '<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
'<div class="well"><a href="google.com">Message one, From someone.</a></div>'+
'<button id="close-popover" data-toggle="clickover" class="btn btn-small btn-primary pull-right" onclick="$("#meddelanden").popover("hide");">Close please!</button>';
$('#meddelanden').popover({animation:true, content:elem, html:true});
回答by jon__o
How about just a little onclick:
只需一点点 onclick 怎么样：
<button onclick="$('#meddelanden').popover('hide');" class="btn btn-small btn-primary pull-right">Close please!</button>
Or how about a function:
或者一个函数怎么样：
<button onclick="close_please();" class="btn btn-small btn-primary pull-right">Close please!</button>
with...
和...
function close_please() {
$('#meddelanden').popover('hide');
}
Or how about binding to the button after it has been created.
或者在按钮创建后绑定到按钮如何。
$('#meddelanden').popover({animation:true, content:elem, html:true});
$('#close-popover').bind('click', function(){
$('#meddelanden').popover('hide');
});
回答by user2957865
Previous examples have two main drawbacks:
前面的例子有两个主要缺点：
- The 'close' button needs in some way, to be aware of the ID of the referenced-element.
- The need of adding on the 'shown.bs.popover' event, a 'click' listener to the close button; which is also not a good solution because of, you would then be adding such listener each time the 'popover' is shown.
- “关闭”按钮需要以某种方式知道被引用元素的 ID。
- 需要在 'shown.bs.popover' 事件上添加关闭按钮的 'click' 监听器；这也不是一个好的解决方案，因为每次显示“popover”时您都会添加这样的侦听器。
Below is a solution which has not such drawbacks.
下面是一个没有这些缺点的解决方案。
By the default, the 'popover' element is inserted immediately after the referenced-element in the DOM (then notice the referenced-element and the popover are immediate sibling elements). Thus, when the 'close' button is clicked, you can simply look for its closest 'div.popover' parent, and then look for the immediately preceding sibling element of such parent.
默认情况下，'popover' 元素立即插入到 DOM 中被引用元素之后（然后注意被引用元素和 popover 是直接同级元素）。因此，当单击“关闭”按钮时，您可以简单地查找其最近的“div.popover”父元素，然后查找该父元素的紧接其前面的同级元素。
Just add the following code in the 'onclick' handler of the 'close button:
只需在“关闭按钮”的“onclick”处理程序中添加以下代码：
$(this).closest('div.popover').prev().popover('hide');
Example:
例子：
var genericCloseBtnHtml = '<button onclick="$(this).closest(\'div.popover\').prev().popover(\'hide\');" type="button" class="close" aria-hidden="true">×</button>';
$loginForm.popover({
placement: 'auto left',
trigger: 'manual',
html: true,
title: 'Alert' + genericCloseBtnHtml,
content: 'invalid email and/or password'
});
回答by Sabrina Leggett
Alternative without calling function on click:
单击时不调用函数的替代方法：
Javascript
Javascript
var $popoverParent = $('.popover-parent').popover();
//allow to close when close button clicked
//register listener before popover shown
$popoverParent.on('shown.bs.popover', function()
{
//get the actual shown popover
var $popover = $(this).data('bs.popover').tip();
//find the close button
var $closeButton = $popover.find('.close-btn');
$closeButton.click(function(){
$popoverParent.popover('hide');
});
});
//show your popover
$popoverParent.popover('show');
回答by Patrick McWilliams
try this:
尝试这个：
<input type="button" onclick="$(this).parent().hide();" value="close">
by passing $(this) your referencing the button and parent references the element the button sits in
通过传递 $(this) 你引用按钮和父元素引用按钮所在的元素
回答by scott
I have many popovers on my site, and they all have the same custom title bar, so they all have the same close button. Therefore, I can't pass an ID to an onclick handler. Instead, I decided to search for the open popover (only one can be open at a time) and then close it.
我的网站上有很多弹出框，它们都有相同的自定义标题栏，所以它们都有相同的关闭按钮。因此，我无法将 ID 传递给 onclick 处理程序。相反，我决定搜索打开的 popover（一次只能打开一个）然后关闭它。
function closeMe() {
$( document ).find('.popoverIsOpen').popover( 'hide' );
}
