Bootstrap弹出框不能被破坏吗？答案

【问题标题】：Can Bootstrap popovers not be destroyed?Bootstrap弹出框不能被破坏吗？
【发布时间】：2016-02-28 22:16:45
【问题描述】：

是否可以让引导程序 (v3) 弹出框在页面加载开始时加载它的 div，并且在切换时不被销毁？

我在一个 div 中有一个弹出框内容：

<div id="popoverContent">
<h1>Stuff</h1>
<p>I'm in a popover!</p>
</div>

还有一个切换弹出框的按钮：

<a id="floating_tab" data-toggle="popover" data-placement="left">Button</a>

这是我处理按钮推送的 Javascript 代码：

<script>
var x = false;
$('[data-toggle=popover]').popover({
    content: $('#popoverContent').html(),
    html: true
}).click(function() {
  if (x) {
      $(this).popover('hide');
      x = false;
  }
  else {
    $(this).popover('show');
    x = true;
  }
});
</script>

问题是，当调用$(this).popover('show'); 时，会创建一个 div。检查元素（chrome）中会显示类似这样的内容：

<div class="popover fade left in" role="tooltip" id="popover460185" style="top: 430.5px; left: 2234px; display: block;"><div class="arrow" style="top: 50%;"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content">
  <h1>Stuff</h1>
  <p>I'm in a popover!</p>
</div></div>

但是当再次单击该按钮时，整个 div 本身就会从页面中删除并消失。是否可以在页面加载期间创建弹出框 div（虽然隐藏）并且可以在不删除 div 的情况下进行切换？

【问题讨论】：

为什么重要以及您要解决的具体问题是什么？
我正在尝试在 popoverContent div 中添加音频。当有人播放它时，它会继续播放，即使他们关闭了弹出框（或导航到另一个页面，我确实使用 AJAX）。但是当您关闭页面上的弹出框时，音频会停止播放。我需要一个解决方案来保持音频加载，即使弹出窗口关闭。
如果您导航到另一个页面，则无法继续播放音频。只能在单页应用中做到这一点
我已经让它处理不同页面的音频播放（ajax - mane-frame.com）。我只需要保持弹出框“加载”。
Bootstrap 不提供此功能。弹出框（它是工具提示的扩展）在每个show 调用上动态生成 - 目前不提供用于传递预定义 HTML 的解决方案 - 需要编写插件。 hide 方法使用 jQuery.detach 从 DOM 中删除元素。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

如 cmets 中所述，Bootstrap 3 目前无法实现。Popover（它是 Tooltip 的扩展）是在 show 上动态创建的，并与 @987654324 上的 DOM 分离（使用 jQuery.detach） @。

最好使用自己的 JavaScript 并简单地使用 Bootstrap 的 CSS。但是，您可以使用 Popover 的事件 API 轻松修补功能 - 可以从以下位置开始：

$(function () {

  var content = $('#popover-content'), // Pre defined popover content.
      popover = $('#popover-anchor').popover();

  popover.on('inserted.bs.popover', function () {
    var instance = $(this).data('bs.popover');
    // Replace the popover's content element with the 'content' element
    instance.$tip = content;
  });

  popover.on('shown.bs.popover', function () {
    var instance = $(this).data('bs.popover');
    // Remove the reference to 'content', so that it is not detached on hide
    instance.$tip = null;
  });

  popover.on('hide.bs.popover', function () {
    // Manually hide the popover, since we removed the reference to 'content' 
    content.removeClass('in');
    content.addClass('out');
  });

});

Codepen

【讨论】：