Javascript 当在弹出窗口外而不是在弹出窗口上单击时，关闭引导弹出窗口

是否存在阻止弹出框在内部单击时关闭的方法？当我添加一个

容器

选项时，就会发生这种情况

$('#share_form').popover({
    'container': '#share_form',
    'html': true,
    'content': function() { return $('#popover_content').html(); },
    'title': 'My Title',
    'placement': 'bottom',
    'viewport': 'body',
});

$(document).on('click', '#div_button', function(event)
{
    event.preventDefault();
    alert("Whent his is clicked, the popover closes :(");
});

<div id="popover_content" style="display:none;">
    <div id="div_button">Click Me</div>
</div>

---

你可以试试这个。这来自引导的文档

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Dismissible popover

您可能需要稍微调整一下：

HTML

<button type="button" class="btn btn-default">Popover on right</button>

<div id="content" class="hidden">this is my awesome content
    <br/>includes a
    <button type="button" class="btn btn-default">save</button> button
</div>

---

{“trigger”：“focus”}

在通过javascript执行操作时不会执行任何操作。让我确定一下，您需要的是带有popover witch的按钮不会通过单击按钮关闭，对吗？它工作正常。你是说我的代码在Safari中不起作用？它在Safari版本8.0.3中工作。很抱歉

tabindex

修复了safari的bug。但是，当您单击popover中的内容时，它将关闭。对不起，我的问题不清楚。我的问题是，当我点击popover内的东西时，它会关闭。有什么特别的原因使默认的弹出行为/语法对你来说不够好吗？如：中的示例，当我单击popover时，默认语法关闭。任何语法，真的，我都试过了。没有在链接的任何现场演示中（这里是Win7上的Chrome）-我点击按钮，弹出窗口显示；我在任何地方（popover的内部/外部）单击，它会一直保持在那里，直到我再次单击按钮将其关闭……当我向它添加一个

容器时就会发生这种情况。这是必要的，如果我想它后续的窗口大小谢谢尝试。我真的很感谢你抽出时间。所以现在发生的是。我正在使我的popover容器与popover按钮本身的元素相同。这是唯一的方法，我可以使它真正坚持的页面大小。因此，当我点击它时，它会切换。编辑：这就是我的问题。我必须将它附加到其他以相同方式随文档移动的内容上。谢谢，我明白了。。。那么，您想添加一个更完整的代码示例吗？如果不了解问题的全部要点，就很难找到解决方案。。。你必须使用与容器和按钮相同的元素吗？是的，我知道，这需要很长的时间才能解决我的具体问题。很抱歉。但是你帮了我很多忙！哈哈，有时候你只需要努力完成它，想法就会出现。直到现在，我还是找不到任何和我的按钮一样随文档移动的东西，但我发现了一些东西。我要注意的是，容器不能与popover触发器元素相同。我唯一的问题是在单击外部时使其消失。如果您将触发器更改为“焦点”（如我更新的示例中所示：），您将单击按钮，它将弹出。如果你在它外面单击，它将隐藏。。。这就是你需要的吗？在SafariOSX上，在你的fiddle和我的开发站点上，focus对我没有任何帮助。没有弹出窗口出现。
<button type="button" class="btn btn-default">Popover on right</button>

<div id="content" class="hidden">this is my awesome content
    <br/>includes a
    <button type="button" class="btn btn-default">save</button> button
</div>

 $(function () {
    var options = {
        content: function () {
            return $("#content").html();
        },
        placement: "right",
        container: "body",
        toggle: "popover",
        title: 'My Title',
        html: true
    };

    $('.btn').popover(options);
});