Bootstrap Popover 关闭按钮出现问题 [英] Having Issue on Bootstrap Popover Closing Button

问题描述

你能看看这个演示 并告诉我为什么我无法弹出通过添加的关闭按钮关闭弹出框后首先单击弹出框?

Can you please take a look at This Demo and let me know why I am not able to pop over the popover on First click after closing the popover through the added close button?

$(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');
    });
});

如您所见，每次点击 Click Me 时，弹出框都可用，但是当我通过 x(关闭)按钮关闭它时第一次尝试时它不会弹出！但它可以在第二次点击！

as you can see the popover is available every time on clicking on <button>Click Me</button but when I close it by x (close) button it is not popping up at first try! but it works in second click!

推荐答案

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

Not sure why that is happening - it appears to be a bug. However, you can work around it by simply triggering the popover button's click event when the user clicks the close button:

$(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();
      });
    });
});

此处演示

这篇关于Bootstrap Popover 关闭按钮出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！