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

来源：互联网发布：c语言之父编辑：程序博客网时间：2024/06/07 21:29

做了个消息提示框，在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)        }    })

效果图如下：

阅读全文

1 0