無法解決引導下拉菜單中頂部菜單的隱藏

Question

我在引導程序應用程序中將插件用作html編輯器，並且其下拉菜單的結構如下：

<div class="btn-group" title="Fonts" style="cursor: pointer;">
    <a class="btn dropdown-toggle btn-sm btn-success" data-toggle="dropdown" href="javascript:void(0)" title="Fonts">Font<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="javascript:void(0)">Sans serif</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Serif</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Wide</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Narrow</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Comic Sans MS</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Courier New</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Garamond</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Georgia</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Tahoma</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Trebuchet MS</a></li>
        <li><a tabindex="-1" href="javascript:void(0)">Verdana</a></li>
    </ul>
</div>

在下拉菜單中選擇一種字體后，頂部的“字體”按鈕消失。 原因是事件冒泡到btn-group並將其樣式元素設置為“ display：none”。

我試圖防止冒泡，以便僅下拉菜單消失，但字體下拉菜單可以再次使用。

我嘗試了不同的選擇，即：

$("dropdown-menu li a").click(function(event){
    event.stopPropagation();
});   

和

$(".dropdown-menu li a").click(function(event){
    event.stopPropagation();
});   

還有一些，但沒有成功。

有什么建議嗎？

附言：我已閱讀了有關該主題的所有文章（包括此處的許多示例），並花了很多時間試圖解決該問題。 此外，我盡力將其表述得盡可能清晰，因此這是一個適當陳述和研究的問題。

Answer 1

由於HTML是動態生成的，因此可以使用事件委托 。 您正在使用以下代碼

$(".dropdown-menu li a").click(function(event){
    event.stopPropagation();
}); 

當代碼運行時，將click事件綁定到與選擇器.dropdown-menu li a匹配的元素。 由於元素是動態創建的（在運行此代碼之后），因此事件處理程序不會被附加。 通過使用事件委托，您可以編寫

$(document).on("click", ".dropdown-menu li a", function(event){
    event.stopPropagation();
}); 

它將事件處理程序綁定到document元素， 該元素在代碼運行時確實存在 。 並且僅當單擊與選擇器.dropdown-menu li a匹配的元素時，才會觸發此處理程序。