Cannot resolve the hiding of the top menu in bootstrap dropdown menu

Question

I use a plugin as html editor in a bootstrap application and it has the following structure for it's dropdown menus:

<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>

After selecting one of the fonts in the dropdown menu the top "Fonts" button disappears. The reason is that the event bubbles up to the btn-group and set it style element to "display: none".

I have tried to prevent the bubbling up so that only the dropdown menu disappears but the Fonts dropdown can be used again.

I have tried different options, ie:

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

and

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

and a few others but no success.

Any suggestions please?

PS I have read all I could find on this subject (including the many examples on here) and spend many hours trying to get it resolved. Furthermore, I tried my best to formulate it as clear as possible, therefore it is a proper stated and researched question.

Answer 1

Since the HTML is being generated dynamically, you could use event delegation . The following code you are using

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

binds a click event to elements matching the selector .dropdown-menu li a when that code is ran . Since the elements are created dynamically (after this code is run), the event handlers aren't getting attached. By using event delegation, you could write

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

which will bind the event handler to the document element, which does exist at the time the code runs . And this handler will only be fired if an element matching the selector .dropdown-menu li a is clicked.