使用 jquery 在按钮单击时显示弹出窗口

Question

我正在尝试使用弹出窗口显示通知消息，它可以正常工作，但是如果我第一次单击按钮加载页面后它不会显示弹出窗口，之后它工作正常这是我的代码-

<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 
    }
});

Answer 1

检查一下你里面的情况

$(document).ready(function(){
     //Your condition here 
});

Answer 2

你应该看看 popovers methods:

为了显示您需要使用的弹出窗口：

$('#element').popover('show');

改为使用：

$('[data-toggle="popover"]')

selector 我建议你直接解决你的元素。

$('#bulk_actions_btn_new')  or $(this)

如果您想使用数据属性来选择元素，您需要使用 filter 函数。

为了避免闪烁效果，您可以仅在弹出框隐藏时显示它。如果您在按钮上点击得太快，您可以避免隐藏处理 hide.bs.popover 事件的弹出窗口。

片段：

$(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>

Answer 3

您需要启用弹出框才能使用。默认情况下不启用它们。所以当你调用 popover() 方法时，你实际上是在初始化弹出窗口。你在点击事件上这样做，因此它第一次不起作用。当 document.ready 像这样被触发时你应该这样做 -

$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});

这将在您的代码中启用所有 bootstrap 弹出窗口

使用 jquery 在按钮单击时显示弹出窗口

Show popover on button click using jquery

html

jquery

popover

twitter-bootstrap