2
我熟悉Bootstrap的弹出窗口如何工作以及如何将其分配给特定的容器元素。但是,我有一种情况,即由代码生成多个元素,并且这些元素中的每个元素都可能没有特定的预先分配的ID。我有一个创造的这种情况小提琴here将Bootstrap弹出窗口分配给父元素
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?看起来容器需要是一些特定的命名元素。你的帮助是appreicated