bootstrap popover与a标签点击事件冲突，需要点击两下才能显示问题

最新推荐文章于 2024-06-27 08:20:19 发布

云中不知人

最新推荐文章于 2024-06-27 08:20:19 发布

阅读量4.2k

点赞数 1

分类专栏： js 文章标签： bootstrap popover 点击事件

本文链接：https://blog.csdn.net/u011085172/article/details/77319668

版权

js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

做了个消息提示框，在dropdown-menu下的每个item点击弹出Popover框，页面代码如下：

<li class="dropdown" id="header-tasks">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-tasks"></i>
                        <span class="badge" id="tasknum">0</span>
                        </a>
                        <ul class="dropdown-menu tasks" >
                            <li class="taskli"  data-stopPropagation="true">
                                <a href="#" targetuuid="sf">
                                    <span class="header clearfix">
                                        <span class="pull-left">111</span>
                                        <span class="pull-right">11</span>
                                    </span>
                                </a>
                            </li>
                            <li class="footer">
                                <span id="tasknumtext" class="pull-left"><i class="fa fa-check"></i> 0 tasks</span>
                                <span class="pull-right"><a href="#">See all tasks <i class="fa fa-arrow-circle-right"></i></a></span>
                            </li>
                            
                        </ul>
                    </li>

原js如下：

$("li.taskli").on('click','a',function(e){     
            var uuid = $(this).attr('targetuuid');
            var taskhtml = '<div id="taskview">' + popheadDivHtml()+'</div>';
            $(this).popover({
                placement:'bottom',
                title:uuid,
                html:'true',
                content:taskhtml
            });
            getResultFromFile(uuid)
        }
    })

在点击时，发现popover的点击事件与a标签的点击事件冲突，popover需要点击两下才可以弹出

这里就算是在$(this).popover后面加上.popover('show') 或者.popover('toggle')都会有显示问题，于是，只能从判断popover的显示入手，解决这个问题，代码如下：

$("li.taskli").on('click','a',function(e){
        if ($(this).parent().find('div.popover').size()>0)
        {
            $(this).popover('destroy')
        }else{        
            var uuid = $(this).attr('targetuuid');
            var taskhtml = '<div id="taskview">' + popheadDivHtml()+'</div>';
            $(this).popover({
                placement:'bottom',
                title:uuid,
                html:'true',
                content:taskhtml
            }).popover('show');
            
            getResultFromFile(uuid)
        }
    })

效果图如下：