CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
sdvnksv
sdvnksv

Reputation: 9668

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!

Upvotes: 0

Views: 716

Answers (1)

Sam Battat
Sam Battat

Reputation: 5745

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

Upvotes: 3

Related Questions