Deka87 Deka87 - 3 months ago 9
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">
Dropdown
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#">Open submenu ></a>
<ul class="dropdown-menu">
<li>
<a href="#">Submenu link</a>
</li>
</ul>
</li> <!-- / .dropdown-submenu -->
</ul>
</li> <!-- / .dropdown -->
</ul> <!-- / .navbar-nav -->


http://codepen.io/Deka87/pen/ORyRLd

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!

Answer

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