使用jQuery在按钮点击时显示弹出框

Question

使用jQuery在按钮点击时显示弹出框

4

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

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

- user7160370

if(condition)检查了什么？因为它可能有两种情况：1）您的DOM尚未完全加载，因此第一次单击无效；2）您的条件第一次为false，代码的else部分更改了您的条件，因此第二次单击时您的条件返回true。 - melvin

如果我在if条件中显示警报，那么警报会正确显示，那么弹出窗口有什么问题吗？ - user7160370

你点击按钮的速度有多快？只是作为一个测试，在页面加载后等待一段时间，然后再试一下。如果可以正常工作，那么很可能是一些脚本或元素还没有加载完成。 - melvin

3个回答

1

只需在内部检查您的条件

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

- Agnelo Dsouza

1

将你的代码进行格式化，请参考以下链接： https://meta.stackoverflow.com/questions/251361/how-do-i-format-my-code-blocks - isuruAb

1

在使用之前，您需要启用弹出框。它们默认情况下是未启用的。因此，在调用popover（）方法时，您实际上正在初始化弹出框。您可以在单击事件上执行此操作，因此第一次不起作用。应该在文档已准备好时触发此操作，如下所示 -

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

这将启用代码中的所有Bootstrap弹出框。

- kinshuk jain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gaetanoM · Accepted Answer

你应该看一下弹出方法：

为了显示弹出框，你需要使用：

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

不要使用：

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

我建议您直接选择要操作的元素。

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