【问题标题】:Popover only shows with every second click when using dismiss button使用关闭按钮时,弹出框仅在每第二次单击时显示
【发布时间】:2015-08-14 11:31:58
【问题描述】:

我在一个页面上有多个弹出框,它们都有一个关闭按钮。

如果我通过单击打开它的同一个按钮来关闭弹出框,我没有问题。 当我单击弹出窗口中的一个关闭按钮时,问题就出现了。

当我点击弹出窗口中的关闭按钮时,弹出窗口会关闭,但下次我点击打开它时,它不会打开。只有当我再次单击该按钮时它才会打开。

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

如何在每次单击按钮打开弹出框时打开它?

【问题讨论】:

    标签: jquery twitter-bootstrap


    【解决方案1】:

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

    我已经解决了这个问题:

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

    【讨论】:

      猜你喜欢
      • 2013-02-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-09-02
      • 2021-01-05
      • 2015-04-30
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多