title: Bootstrap 4: open dropdown menu using javascript
body: <p>I have a simple dropdown menu which looks like this:</p>
  
  <pre><code>&lt;div id="actions" class="dropdown btn-group btn btn-outline-secondary" role="group"&gt;
    &lt;div id="actionToggle" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
      toggle
    &lt;/div&gt;
    &lt;div class="dropdown-menu" role="menu" aria-labelledby="actionToggle"&gt;
      &lt;div class="dropdown-header"&gt;Actions ...&lt;/div&gt;
      &lt;a href="#" class="dropdown-item" name="action1"&gt;Action 1&lt;/a&gt;
      &lt;a href="#" class="dropdown-item" name="action2"&gt;Action 2&lt;/a&gt;
      &lt;a href="#" class="dropdown-item" name="action3"&gt;Action 3&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As described in the <a href="https://getbootstrap.com/docs/4.0/components/dropdowns/" rel="nofollow noreferrer">docs</a>, it's possible to use JavaScript to open the Dropdown Menu. E.g. using the <code>dropdown("toggle")</code> method in Jquerys onDomready will open the menu when the page is loaded. The following code opens the menu as expected:</p>
  
  <pre><code>$("#actionToggle").dropdown("toggle");
  </code></pre>
  
  <p>But when I try to use the code inside a Jquery onclick-event handler, it does not open the menu. It's the same code and the event is fired correctly. Any ideas what is going wrong here?</p>
  
  <pre><code>$("#open").on("click", function() {
    $("#actionToggle").dropdown("toggle");
  });
  </code></pre>
  
  <p>The html element I want to click on looks like this:</p>
  
  <pre><code>&lt;div id="open"&gt;text&lt;/div&gt;
  </code></pre>
  
  <p>Clicking the <strong>text</strong> should open the menu, but it does not...</p>
  
  <p>I prepared a JSFiddle to play with the code: <a href="https://jsfiddle.net/3ot08j68/1/" rel="nofollow noreferrer">https://jsfiddle.net/3ot08j68/1/</a></p>
  
  <p>The following libraries are used: JQuery 3.2.1, Bootstrap 4.0beta.3, Popper 1.12.9</p>