Назначение Bootstrap popover для родительского элемента

Question

Я знаком с тем, как Poppost Popup работает и как назначить его конкретному элементу контейнера. Однако у меня есть ситуация, когда у меня есть несколько элементов, генерируемых кодом, и каждый из этих элементов может не иметь определенного предварительно назначенного идентификатора. Я сотворенная скрипку в этой ситуации 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? Кажется, что контейнеру должен быть какой-то определенный именованный элемент. Ваша помощь appreicated

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

---

Вы также можете сделать так, чтобы меню не закрывается после нажатия кнопки «Добавить дочерний» со следующим кодом.

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

Пример здесь:http://jsfiddle.net/L7fjgwru/13/