Question

当用户点击弹出窗口旁边的页面上的任意位置时，我试图解除bootstrap 3 popover。我找到了一个优秀的example on jsFiddle并使用最新版本的bootstrap 3（3.3.5）将其添加到一个普通的html文件中。

在jsFiddle示例中，一切都按预期工作，因为它使用的是bootstrap 3.0.2版。

在我的应用程序中会发生以下情况：

我单击按钮显示弹出窗口，然后单击弹出窗口外部以关闭它。但是当我单击按钮以显示弹出窗口时，弹出窗口不会打开。如果我再次单击按钮显示弹出窗口，则会打开。

以下是html文件中的所有内容。

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <title></title>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="bs-example tooltip-demo">
    <div class="bs-example-tooltips">
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on top</button>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on bottom</button>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Popover on right</button>
    </div>
</div>


<script type="text/javascript">
$('[data-toggle="popover"]').popover();

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});
</script> 
</body>
</html>

在最新版本的bootstrap（3.3.5）

0 个答案: