Deka87 Deka87 - 1 year ago 82
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!

Answer Source

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(){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download