Deka87 Deka87 - 4 months ago 15
CSS Question

Dynamically added submenu won't toggle - Bootstrap

Ok, I am really desperate at this point. I've created a submenu for the original Bootstrap dropdown menu:

<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#">Open submenu ></a>
<ul class="dropdown-menu">
<a href="#">Submenu link</a>
</li> <!-- / .dropdown-submenu -->
</li> <!-- / .dropdown -->
</ul> <!-- / .navbar-nav -->

It works as expected until I try to add another submenu dynamically. Please try to click "Add another menu" in the example Codepen. This will add a menu, however, you won't be able to toggle it. Instead it will simply close the current parent menu and that's gonna be it.

Any ideas would be highly appreciated!


Since the item is generated dynamically, you need to select it by a static parent for it to respond to the click event

$(".navbar").on("click", ".dropdown-submenu > a", function(){