使用 jquery 的 bootstrap 弹出框链

Question

我正在尝试从另一个弹出窗口中的一个弹出窗口打开子菜单，但我无法做到这一点。这是示例代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul id="menu1" class="dropdown-menu">
    <li id="instance_1" data-toggle="popover2" style="cursor:pointer">Instance 1</li>
    <li id="instance_2">Instance 2</li>
</ul>
<ul id="menu2" class="dropdown-menu">
    <li id="instance_3">Instance 3</li>
    <li id="instance_4">Instance 4</li>
</ul>

<button type="button" class="btn btn-lg btn-Primary" 
        data-toggle="popover1">
  Click to toggle popover
</button>

<script>
        $('[data-toggle="popover1"]').popover({
            html: true,
            placement: 'auto right',
            container: 'body',
            trigger: 'click',
            template: '<div id="x" class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"><div class="data-content"></div></div></div>',
            content: function () {
                return $('#menu1').html();
            }
        });
        $('[data-toggle="popover2"]').popover({
            html: true,
            placement: 'auto right',
            container: 'body',
            trigger: 'click',
            template: '<div id="y" class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"><div class="data-content"></div></div></div>',
            content: function () {
                return $('#menu2').html();
            }
        });
</script>

有人可以帮助我了解如何执行此操作。提前致谢！！

Answer 1

这里的问题是，当调用 $('[data-toggle="popover2"]').popover() 函数时，它只将侦听器添加到初始模板。当您基于 HTML 填充第一个弹出窗口时，此侦听器不会继续存在。然后解决方案是运行 .popover() 函数再次在生成该内容后（当弹出窗口打开时）。这是一个代码笔，在第一个弹出窗口上使用点击侦听器演示了这一点：

https://codepen.io/zeiv/pen/BJmowO

上面的笔将需要一些摆弄才能正确处理所有细节（例如，关闭第一个弹出窗口不会关闭第二个弹出窗口），但希望你明白了。如果您需要帮助，我可以再做一些工作。

使用 jquery 的 bootstrap 弹出框链

chain of bootstrap popovers using jquery

jquery

bootstrap-popover