javascript - 当在外部而不是弹出窗口上单击时，使 Bootstrap 弹出窗口关闭

Question

当在弹出窗口中单击时，是否有办法阻止弹出窗口关闭？当我添加 container 选项时会发生这种情况。

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

编辑:这就是我最终得到的结果，效果很好；

$('#popover_button').popover({ 
    'trigger': 'manual',
    'container': '#element', /* element that moves on resize like popover_button */
    'html': true,
    'content': function() { return $('#popover_content').html(); },
    'placement': 'bottom',
    'viewport': 'body'
});

$("#popover_button").click(function(e){$('#popover_button').popover('toggle');});

$(document).click(function(e){
    //popover_element is just what was inside #popover_button
    if(e.target.id !== "popover_element" && !$(event.target).hasClass('popover-content')) 
        $("#popover_button").popover('hide');
});

Answer 1

你可以试试这个。这是来自 bootstrap 的文档。

<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>