使用关闭按钮时，弹出窗口仅显示第二次单击 [英] Popover only shows with every second click when using dismiss button

问题描述

我在一个页面上有多个弹出窗口，并且它们中都有一个关闭按钮.

I have multiple popovers on a single page, and they've all got a dismiss button in them.

如果我通过单击打开弹出窗口的相同按钮来消除弹出窗口，则没有问题. 当我单击弹出窗口中的关闭按钮之一时，就会出现问题.

If I dismiss the popover by clicking on the same button that opened it, I don't have a problem. The problem comes in when I click on one of the dismiss buttons in the popover.

当我单击弹出窗口中的关闭按钮时，弹出窗口关闭，但是下次我单击以打开它时，弹出窗口没有打开.仅当我再次单击该按钮时，它才会打开.

When I click on the dismiss button in the popover, the popover closes, but the very next time I click to open it, it doesn't open. It only opens if I click on the button a second time.

HTML:

<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="<div class=&quot;clearfix&quot;><div class=&quot;btn-group&quot;><button class=&quot;btn btn-success btn-sm&quot;>Yes</button><button class=&quot;btn btn-default btn-sm close-popover&quot; data-dismiss=&quot;popover&quot; >No</button></div></div></div>" title="Delete this">Delete this</button>

JS:

$.fn.extend({
    popoverClosable: function (options) {
        var defaults = {
            html: true,
            template:
                '<div class="popover">\
<div class="arrow"></div>\
<div class="popover-header">\
<button type="button" class="close" data-dismiss="popover" aria-hidden="true">&times;</button>\
<h3 class="popover-title"></h3>\
</div>\
<div class="popover-content"></div>\
</div>'
        };
        options = $.extend({}, defaults, options);
        var $popover_togglers = this;
        $popover_togglers.popover(options);
        $popover_togglers.on('click', function (e) {
            e.preventDefault();
            $popover_togglers.not(this).popover('hide');
        });
        $('html').on('click', '[data-dismiss="popover"]', function (e) {
            $popover_togglers.popover('hide');
        });
    }
});

$(function () {
    $('[data-toggle="popover"]').popoverClosable();
});

JSFiddle

每次单击按钮时如何打开弹出窗口?

How can I make my popover open every time I click the button to open it?

推荐答案

看起来像3.3.5中的错误.参见 https://github.com/twbs/bootstrap/issues/16732

Looks like a bug in 3.3.5. See https://github.com/twbs/bootstrap/issues/16732

我已经解决了这个问题:

I've worked around it with:

if ($.fn.popover.Constructor.VERSION == "3.3.5") {
  $('[data-toggle="popover"]').on("hidden.bs.popover", function() {
    $(this).data("bs.popover").inState.click = false
  })
}

这篇关于使用关闭按钮时，弹出窗口仅显示第二次单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！