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

Answer 1

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