javascript - Bootstrap - 弹出框内的弹出框

Question

我正在尝试将 Bootstrap 弹出框放入另一个弹出框内。第一个弹出窗口功能正常(打开并指定了 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');
});

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

谢谢!

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/