Question

我正在尝试使用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 methods：

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

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

改为使用：

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

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

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

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

为了避免闪烁效果，只有隐藏了弹出框才能显示弹出窗口。如果在按钮上单击太快，则可以避免隐藏处理hide.bs.popover事件的popover。

摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

检查你的情况

$(document).ready(function(){

//你的条件

}）;

Answer 3

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

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

这将启用代码中的所有引导程序弹出窗口

使用jquery

3 个答案: