Question

我有一个元素

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

并通过使用javascript

初始化bootstrap popover使其成为支持popover的元素

  $('#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按钮时出现问题。 popover确实隐藏（实际删除），但是，当单击id="1"元素以使弹出窗口显示时，没有任何反应。弹出窗口只会在第二次点击时显示。

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

注意：$(this).parent().parent().remove();选择$("#1").popover("hide")而不是{{1}}用于DRY目的。在popover中加载的内容预计也会在其他地方使用。因此，将“＃1”放在那里是不可接受的。

Answer 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
});

Answer 2

你也可以使用$（elem）.popover（destroy）;

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

这将一起移除弹出窗口，以便再次单击无法触发它。

请参阅此处的文档：http://getbootstrap.com/javascript/#popovers

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

Bootstrap popover半手动切换

3 个答案:

添加这些库

弹出代码