关于Bootstrap Popover Closing Button

时间:2015-06-29 08:23:21

标签: twitter-bootstrap twitter-bootstrap-3

请你看一下This Demo,让我知道为什么在通过添加的关闭按钮关闭弹出窗口后,我无法弹出弹出框?

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        html : true,
        title : 'User Info <a href="#" class="close" data-dismiss="alert">×</a>',
        content : '<div class="media"><a href="#" class="pull-left"><img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
    });
    $(document).on("click", ".popover .close" , function(){
        $(this).parents(".popover").popover('hide');
    });
});

正如您所看到的,每次单击<button>Click Me</button时都可以使用弹出窗口,但是当我按x(关闭)按钮关闭时,它不会在第一次尝试时弹出!但它可以在第二次点击工作!

1 个答案:

答案 0 :(得分:3)

不确定为什么会这样 - 它似乎是一个错误。但是,您可以通过在用户单击关闭按钮时触发弹出按钮的单击事件来解决此问题:

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        html : true,
        title : 'User Info <a href="#" class="close" data-dismiss="alert">×</a>',
        content : '<div class="media"><a href="#" class="pull-left"><img src="../images/avatar-tiny.jpg" class="media-object" alt="Sample Image"></a><div class="media-body"><h4 class="media-heading">Jhon Carter</h4><p>Excellent Bootstrap popover! I really love it.</p></div></div>'
    }).on('shown.bs.popover', function() {
      var popup = $(this);
      $(this).parent().find("div.popover .close").click(function() {
        popup.click();
      });
    });
});

Demo Here