Bootstrap Dropdown toggle doesn't work when called from an event handler

Question

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

PSL · Accepted Answer · 2013-05-22 22:24:11Z

23

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

answered May 22, 2013 at 22:24

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arman Bimatov Over a year ago

Worked like a charm! Although my real situation was a lot more complicated than that, your answer helped me out.

w3debugger Over a year ago

It saves my time :) I was trying to fix this since last 1+ hour... Thanks by the way

Þaw Over a year ago

After all the other answers I tried, this one worked! Thank you sir!

Dwhitz Over a year ago

This is the best answer, after a lot of time wasted in useless answers ! Thank you so much

AbingPj · Accepted Answer · 2021-08-11 02:48:56Z

0

For the vue user here,. you can use this.

<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 @click.stop="toggleDropdown()">Click to toggle</div>

script

methods: {
   toggleDropdown(){
       $(".dropdown-toggle").dropdown('toggle');
   }
}

answered Aug 11, 2021 at 2:48

AbingPj

6599 silver badges21 bronze badges

Collectives™ on Stack Overflow

Bootstrap Dropdown toggle doesn't work when called from an event handler

2 Answers 2

Fiddle

Bootply

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related