twitter-bootstrap 使用 jquery 在按钮单击时显示弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43138916/
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
Show popover on button click using jquery
提问by gaetanoM
I am trying to display notification message by using popover, it is working but after loading a page if i click button first time it doesn't show the popover after that it works fine here is my code-
我正在尝试使用弹出框来显示通知消息，它正在工作，但是在加载页面后，如果我第一次单击按钮，它不会显示弹出框，之后它可以正常工作，这是我的代码 -
<button type="button" id="bulk_actions_btn" class="btn btn-default has-spinner-two" data-toggle="popover" data-placement="bottom" data-original-title="" data-content="Click any question mark icon to get help and tips with specific tasks"> Apply </button>
Jquery
查询
$(document).on('click','#bulk_actions_btn',function(){
if(condition){
$('[data-toggle="popover"]').popover(); //here if the condition is true then popover should be display.
}else{
//ajax
}
});
回答by gaetanoM
You should take a look to popovers methods:
你应该看看popovers 方法：
In order to show the popover you need to use:
为了显示弹出框，您需要使用：
$('#element').popover('show');
Instead to use:
而是使用：
$('[data-toggle="popover"]')
selector I suggest you to address directly your element.
选择器我建议你直接解决你的元素。
$('#bulk_actions_btn_new') or $(this)
If you want to use the data attribute for selecting elements you need to use the filterfunction.
如果要使用 data 属性选择元素，则需要使用过滤器功能。
In order to avoid flickering effects you can show the popover only if it is hidden. If you click too fast on the button you can avoid to hide the popover handling the hide.bs.popover event.
为了避免闪烁效果，您只能在隐藏时显示弹出窗口。如果您在按钮上单击得太快，您可以避免隐藏处理 hide.bs.popover 事件的弹出窗口。
The snippet:
片段：
$(document).on('click', '#bulk_actions_btn', function (e) {
//
// If popover is visible: do nothing
//
if ($(this).prop('popShown') == undefined) {
$(this).prop('popShown', true).popover('show');
}
});
$(function () {
$('#bulk_actions_btn').on('hide.bs.popover', function (e) {
//
// on hiding popover stop action
//
e.preventDefault();
});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" id="bulk_actions_btn"
class="btn btn-default has-spinner-two"
data-toggle="popover"
data-placement="bottom" data-original-title=""
data-content="Click any question mark icon to get help and tips with specific tasks"
aria-describedby="popover335446"> Apply
</button>回答by Agnelo Dsouza
Just check your condition inside
只需检查您的内部状况
$(document).ready(function(){
//Your condition here
//你的条件在这里
});
});
回答by kinshuk jain
you need to enable popover before it can be used. They are not enabled by default. So when you call popover() method, you are actually initializing the popover. You do that on click event and hence it doesnt work for the first time. You should do that when document.ready is triggered like so -
您需要先启用 popover 才能使用它。默认情况下不启用它们。所以当你调用 popover() 方法时，你实际上是在初始化 popover。您在单击事件上执行此操作，因此它第一次不起作用。当 document.ready 像这样被触发时，你应该这样做 -
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
This will enable all bootstrap popovers in your code
这将启用代码中的所有引导程序弹出窗口
