Bootstrap 弹出框半手动切换答案

【问题标题】：Bootstrap popover semi-manual toggleBootstrap 弹出框半手动切换
【发布时间】：2013-08-25 14:53:37
【问题描述】：

我有一个元素

<span id="1">Element</span>

并通过使用javascript初始化引导弹出窗口使其成为启用弹出窗口的元素

  $('#how2').popover({
     html:true,
     placement:"right",
     trigger:"click",
     content:"somecontent",
     title:"sometitle",        
    });

然后在“somecontent”中，我有一个<script></script>，其内容是

$(".popover-close-button").click(function(){
  $(this).parent().parent().remove(); //remove the .popover element
});

其功能是为“sometitle”中定义的 X（关闭）按钮提供点击侦听器，以删除创建的整个“.popover”元素。

切换工作。如果单击id="1" 元素，则会显示弹出框。再次单击时，弹出框将隐藏。单击 X 按钮时会出现问题。弹出框确实隐藏（实际上已删除），但是，当单击 id="1" 元素以使弹出框出现时，什么也没有发生。弹出框只会在第二次点击时显示。

我很高兴知道为什么会发生这种情况。 bootstrap 是否使用全局 javascript 变量来确定弹出框的开/关状态？

注意：选择 $(this).parent().parent().remove(); 而非 $("#1").popover("hide") 以实现 DRY 目的。 popover 中加载的内容也有望在其他地方使用。因此，将“#1”放在那里是不可接受的。

【问题讨论】：

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

试试

.closest()

$(".popover-close-button").click(function(){
      $(this).closest('.popover').remove(); //remove the .popover element
});

或

.parents()

$(".popover-close-button").click(function(){
  $(this).parents('.popover').remove(); //remove the .popover element
});

【讨论】：

两者都可以删除弹出框（使其消失），但要使其再次出现，仍需要单击 2 次。仅当使用 X 按钮关闭弹出框时才会出现此问题。如果通过重新单击启用弹出框的元素来关闭弹出框，则它可以正常工作。
@YudhoAhmadDiponegoro 你会做小提琴吗？
好的。这是jsfiddle.net/wongsolo/79Yj6/2 但是，我无法将引导程序与 jsfiddle 合并。所以弹出框在那里不起作用，它只是代码。
@YudhoAhmadDiponegoro .popover JavaScript 文件？
对不起，什么意思？

【解决方案2】：

你也可以使用 $(elem).popover(destroy);

$('.popover-close-button').click(function() {
    $('#how2').popover('destroy');
});

这会同时移除弹出框，使其无法被其他点击触发。

在此处查看文档：http://getbootstrap.com/javascript/#popovers

【讨论】：

【解决方案3】：

添加这些库

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

弹出式代码

<div class="container">
     <a href="#" title="Dismissible popover" data-toggle="popover"   data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
</div>

<script>
   $(document).ready(function(){
   $('[data-toggle="popover"]').popover();   
});

【讨论】：