0

我有一个元素

<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”放在那里是不可接受的。

4

3 回答 3

0

尝试

.closest()

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

或者

。父母（）

$(".popover-close-button").click(function(){
  $(this).parents('.popover').remove(); //remove the .popover element
});
于 2013-08-25T15:04:00.167 回答
0

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

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

这会一起删除弹出框，这样它就不会被另一次点击触发。

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

于 2013-12-04T23:12:24.083 回答
0

添加这些库

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

于 2015-05-06T10:52:44.253 回答