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

查询

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

原文由 user7160370 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你应该看看 popovers 方法：

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

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

而是使用：

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

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

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

如果要使用数据属性来选择元素，则需要使用 过滤器 功能。

为了避免闪烁效果，您可以仅在隐藏时显示弹出窗口。如果您在按钮上点击得太快，您可以避免隐藏处理 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>

原文由 gaetanoM 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 kinshuk jain 发布，翻译遵循 CC BY-SA 3.0 许可协议