將Bootstrap彈出窗口分配給父元素

我熟悉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

來源

2014-10-19 ChicagoSky

工作實例：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

您也可以把它使菜單則點擊「添加子」用下面的代碼後不會關閉。

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

這裏舉例：http://jsfiddle.net/L7fjgwru/13/

來源

2014-11-03 05:52:36 JSuar

將Bootstrap彈出窗口分配給父元素

回答

相關問題