Bootstrap Dropdown toggle doesn't work when called from an event handler
24,090
Just stop the event from propagating and it should work.
$(function(){
//$(".dropdown-toggle").dropdown('toggle'); // this works
$('#click').click(function(e){
e.stopPropagation();
$(".dropdown-toggle").dropdown('toggle');// this doesn't
});
});
Fiddle
Bootply
Author by
Arman Bimatov
Student (Penn State), programmer (C#, Java), web-developer (jQuery, HTML), web-designer (beginner), and a musician! Currently working on an awesome startup at TravelWits finding and optimizing cheap direct flights for all humans.
Updated on August 11, 2021Comments
-
Arman Bimatov over 2 years
I have an element, dropdown, and some jquery to toggle the dropdown dynamically. However, the toggle doesn't work when called from the event handler. I've already tried everything suggested by related Stackoverflow answers, but nothing works :(
JavaScript:
$(function(){ //$(".dropdown-toggle").dropdown('toggle'); // this works $('#click').click(function(){ $(".dropdown-toggle").dropdown('toggle'); // this doesn't }); });
HTML:
<div class="dropdown clearfix"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <ul id="dropdown" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </div> <br> <div id="click">Click to toggle</div>
And here is the working (not!) sample: http://bootply.com/61988