Question

我试图通过点击某个链接在一个页面上显示多个弹出式窗口。我将在一个div上向您展示一个例子。以下是这样的：

$(".tutorial").on('click', function(){ 
    $('[data-toggle="popover"]').popover();
});

<li>
   <a href="#" class="tutorial">
      <span class="glyphicon glyphicon-book" aria-hidden="true"></span> 
      Tutorial Mode
   </a>
</li> 


<div data-container="body" data-toggle="popover" data-placement="right" 
     data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." 
     style="height:100%; " class="col-xs-3 label-positive" 
     data-original-title="" title="">

    <h2 style="height:100%; font-weight:bold; padding: 15px 1px 15px 1px; border-radius:5px;" class="text-center"> +3$</h2>
</div>

当我点击div弹出窗口时没有问题，但是当我点击链接时没有任何反应。控制台或其他任何东西都没有错误，没有任何反应

Answer 1

.popover()只是创建了popover（）bootstrap元素，因此必须在某个地方，然后触发它以显示你这样做：

       $(".tutorial").on('click', function(){ 
          $('[data-toggle="popover"]').popover('show');
       });

实际上我可能会弄错，我认为你调用.popover()使任何元素成为一个弹出窗口，但是如果你使用的是data属性，那么bootstrap.js应该已经处理了这一行{{1} }

$('[data-toggle="popover"]').popover();将显示，.popover('show')将摆脱popover

Answer 2

Bootstrap popovers需要通过jQuery手动初始化。将其添加到.js文件中：

$('[data-toggle="popover"]').popover();

如果您在一个页面上有多个弹出式窗口，请使用此脚本，以便一次只允许显示一个。

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

Bootstrap popover没有显示出来

2 个答案: