将 Bootstrap 弹出框分配给父元素答案

【问题标题】：Assigning Bootstrap popover to parent element将 Bootstrap 弹出框分配给父元素
【发布时间】：2014-10-19 17:22:42
【问题描述】：

我熟悉 Bootstrap 的弹出框如何工作以及如何将其分配给特定的容器元素。但是，我有一种情况，我有多个由代码生成的元素，并且每个元素都可能没有特定的预分配 ID。我创造了这种情况here

HTML 代码：

<div class="btn-group">
    <button type="button" class="btn btn-info">Menu 1</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>

    </button>
    <ul class="dropdown-menu node-menu" role="menu">
        <li class="node-menu-item"> <a href="#" class="add-menu-item"><i class="glyphicon glyphicon-plus"></i> Add Child</a>

        </li>
        <li class="node-menu-item"> <a href="#" class="edit-menu-item"><i class="glyphicon glyphicon-edit"></i> Edit Node</a>

        </li>
        <li class="node-menu-item"> <a href="#" class="delete-menu-item"><i class="glyphicon glyphicon-trash"></i> Delete Node</a>

        </li>
    </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-info">Menu 2</button>
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>

    </button>
    <ul class="dropdown-menu node-menu" role="menu">
        <li class="node-menu-item"> <a href="#" class="add-menu-item"><i class="glyphicon glyphicon-plus"></i> Add Child</a>

        </li>
        <li class="node-menu-item"> <a href="#" class="edit-menu-item"><i class="glyphicon glyphicon-edit"></i> Edit Node</a>

        </li>
        <li class="node-menu-item"> <a href="#" class="delete-menu-item"><i class="glyphicon glyphicon-trash"></i> Delete Node</a>

        </li>
    </ul>
</div>
<div id="add-popover-content" class="hidden">
    <form role="form" method="post" action="/add" id="add-form" class="form-inline">
        <input class="form-control" type="text" placeholder="Department name" name="data[Department][name]" id="department-name">
        <button type="submit" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-ok"></i>
        </button>
    </form>
    <div id="validation-msg"></div>
</div>

JS代码：

$('.add-menu-item').popover({
    html: true,
    placement: 'right',
    title: 'Add New Node',
    content: function () {
        return $("#add-popover-content").html();
    },
    container: function () {
        return $(this).parents('div');
    }
});

问题：如何判断容器应该是包含 DIV 的父容器？看起来容器需要是一些特定的命名元素。感谢您的帮助

【问题讨论】：

标签： jquery twitter-bootstrap-3 bootstrap-popover

【解决方案1】：

工作示例： http://jsfiddle.net/L7fjgwru/10/

您是否尝试过删除container 函数？删除container 函数后似乎会出现该节点。但是，您必须重新单击菜单才能看到该节点。不确定这是否是预期的结果。

$('.add-menu-item').popover({
    html: true,
    placement: 'right',
    title: 'Add New Node',
    content: function () {
        return $("#add-popover-content").html();
    }
});

您也可以使用以下代码，使菜单在单击“添加子项”后不会关闭。

$('.dropdown-menu a.add-menu-item').click(function(e) {
    e.stopPropagation();
});

此处为示例： http://jsfiddle.net/L7fjgwru/13/

【讨论】：