Bootstrap - 弹出框内的弹出框答案

【问题标题】：Bootstrap - popover inside a popoverBootstrap - 弹出框内的弹出框
【发布时间】：2015-11-24 22:37:38
【问题描述】：

我正在尝试将引导弹出框放入另一个弹出框中。第一个弹出窗口正常运行（打开并指定了 HTML 内容），但第二个弹出窗口在正确打开时似乎没有启用我设置的任何设置（html:true、trigger:'manual' 或 html 内容）。请看下面的演示：

Fiddle

<div>
<a href="#" id="popover1" data-original-title="<b>testing</b>" data-placement="bottom">Click</a>

<div id="popover_content_wrapper1" style="display: none">
    <a href="#" id="popover2" data-original-title="<b>testing again</b>" data-placement="bottom">Click again</a>
</div>

<div id="popover_content_wrapper2" style="display: none">
    <b>Hello world</b>
</div>
</div>

$('#popover1').popover({
    html: true,
    trigger: 'manual',
    content: function() {
        return $('#popover_content_wrapper1').html();
    }
});

$(document).on('click', '#popover1', function() {
    $(this).popover('toggle');
});

$('#popover2').popover({
    html: true,
    trigger: 'manual',
    content: function() {
        return $('#popover_content_wrapper2').html();
    }
});

$(document).on('click', '#popover2', function() {
    $(this).popover('toggle');
});

如果有任何提示/帮助，我将不胜感激。

谢谢！

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

这是因为在您初始化 #popover2 时，它仍然不“存在”。只有在切换#popover1 时才会存在。

因此，每次切换#popover1 时都必须对其进行初始化，因为当它隐藏时，它会从 DOM 中移除（包括子元素）

$(document).on('click', '#popover1', function() {
    $(this).popover('toggle');
    $('#popover2').popover({
        html: true,
        trigger: 'manual',
        content: function() {
            return $('#popover_content_wrapper2').html();
        }
    });
});

http://jsfiddle.net/kg7nyo6e/1/

【讨论】：

【解决方案2】：

由于引导程序不支持弹出框内的弹出框，我已在第一个弹出框的内容中初始化了弹出框。您可以在第一个 popover 内容中简单地添加以下 javascript 代码，如下所示。

<script>
    jQuery(function () {
        jQuery('[data-toggle="popover"]').popover();
    });
</script>

希望对你有帮助。

【讨论】：