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>

希望它可以提供幫助。