Question

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

HTML code：

<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的父容器？看起来容器需要是一些特定的命名元素。你的帮助是有用的

Answer 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();
    }
});

Example output

你也可以这样做，这样点击＆＃34;添加孩子＆＃34;后菜单就不会关闭。使用以下代码。

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

示例： http://jsfiddle.net/L7fjgwru/13/

将Bootstrap popover分配给父元素

1 个答案: