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

Question

我试图通过使用popover显示通知消息,它​​正在工作但是在加载页面后,如果我第一次点击按钮它没有显示popover之后它工作正常这里是我的代码 -

<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

你应该看看popovers方法:

为了显示你需要使用的popover:

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

而是使用:

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

选择我建议你直接解决你的元素.

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

如果要使用data属性选择元素,则需要使用过滤器函数.

为了避免闪烁效果,只有隐藏弹出窗口才能显示弹出窗口.如果在按钮上单击太快,则可以避免隐藏处理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>