Popover 中的引导选项卡不起作用答案

【问题标题】：Bootstrap Tab within Popover isn't workingPopover 中的引导选项卡不起作用
【发布时间】：2013-05-27 23:50:28
【问题描述】：

在 Bootstrap 的 Popover 中使用时，Bootstrap 的选项卡似乎对我不起作用。

接下来会发生什么：

 1. Popover opens
 2. Active tab on click changes
 3. Tab content is not changing <-- PROBLEM

标签已正确创建，如果您在弹出框之外尝试它们，它们可以正常工作。

<a class="btn" id="btnPopover" href="#">Launch Popover</a>
<div class="tabbable hide" id="popoverContent">
<ul class="nav nav-tabs">
    <li class="tab active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li class="tab"><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li class="tab"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content" style="padding-top: 15px">
    <div class="tab-pane active" id="tab1">Tab Content 1</div>
    <div class="tab-pane" id="tab2">Tab Content 2</div>
    <div class="tab-pane" id="tab3">Tab Content 3</div>
</div>

$(function () {
 $("#btnPopover").popover({
  html: true,
  trigger: 'click',
  title: "Title",
  placement: "bottom",
  content: $("#popoverContent").html()
 });
});

在这种情况下，bootstrap 似乎会发生复制元素。我计划在内容选项卡中的元素上使用更多的 javascript 库和插件，这几乎是不可能的，除非有人提供了可靠的解决方法。老实说，我认为这是一个有效的 Bootstrap 错误。

jsfiddle 演示：http://jsfiddle.net/iboros/nCfBf/

【问题讨论】：

复制元素的不是 Bootstrap。它将content 选项记录为标记（或由函数产生的标记）。它不直接支持使用页面中已有的元素。您的代码通过使用现有的 DOM 元素复制元素，获取它们的 html，并将其提供给 Bootstrap 以用于内容。解决方案非常简单：只需删除您复制的元素（如@PSL 所示）。

标签： javascript jquery twitter-bootstrap tabs popover

【解决方案1】：

选项 1：

删除现有选项卡并获取其 HTML 内容。

$("#btnPopover").popover({
    html: true,
    trigger: 'click',
    title: "Title",
    placement: "bottom",
    content: $('#popoverContent').remove().html()
});

Demo

选项 2：

使用类选择器代替 id 选择器

即

<a href=".tab2" data-toggle="tab">Tab 2</a>

而不是

<a href="#tab2" data-toggle="tab">Tab 2</a>

HTML

<div class="tabbable hide" id="popoverContent">
     <ul class="nav nav-tabs">
        <li class="active"><a href=".tab1" data-toggle="tab">Tab 1</a></li>
        <li class="tab"><a href=".tab2" data-toggle="tab">Tab 2</a></li>
        <li class="tab"><a href=".tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content" style="padding-top: 15px">
        <div class="tab-pane active tab1" >Tab Content 1</div>
        <div class="tab-pane tab2">Tab Content 2</div>
        <div class="tab-pane tab3" >Tab Content 3</div>
    </div>
</div>
<a class="btn" id="btnPopover" href="#">Launch Popover</a>

Demo

【讨论】：

@iboros 它的全部原因是如果 Id，BS 什么都不做，只是选择选择器，所以重复的 id，第一个匹配并且选择不会发生在 popover 上，因为它稍后会出现在 DOM 中。
是的，你可以这样做，但是像这样将元素留在 DOM 中似乎很脏。
@iboros：可能是因为该插件在 DOM 上做一些准备，并且通过销毁和重新创建元素，初始化没有完成。您真正想要的是弹出框使用现有元素的选项，而不是您为其提供 HTML，它看起来不像弹出框支持。
所以我需要在点击标签后重新触发一些东西？哦，伙计，我想我会尝试用模态而不是弹出框做一些事情，希望这也不会让我很生气，呵呵。
@iboros：是的，而且令人惊讶的是，Popover 似乎没有提供任何类型的事件。 :-( 是的，切换到模态可能更好，它实际上使用元素，而不是让你给它标记。