Bootstrap - 弹出窗口内的弹出窗口

Question

我试图在另一个popover中放置一个bootstrap popover。 第一个弹出窗口功能正常（打开并指定了HTML内容），但第二个弹出窗口正常打开时似乎没有我设置的任何设置（html：true，trigger：'manual'或html内容）。 请参阅下面的演示：

小提琴

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

我很感激任何提示/帮助。

谢谢！

Answer 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/

Answer 2

由于bootstrap不支持popover中的popover，我在第一个popover的内容中初始化了popover。 您可以在第一个弹出窗口内容中添加以下javascript代码，如下所示。

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

希望它可以提供帮助。