title: Bootstrap dropdown with other button inside clickable parent container
body: <p>I am trying to add a bootstrap dropdown inside another clickable parent. It's kind of tricky I guess. Here is the Codepen I created with the issue recreated.</p>
  
  <p><a href="https://codepen.io/rpmcmurphy/pen/OJLzMrY?editors=0011" rel="nofollow noreferrer">Codepen with the issue recreated</a></p>
  
  <p>Expected behavior: On clicking the dropdown, the dropdown will fire, so will by clicking the other button (optional if too tricky) and none will trigger a click on the parent.</p>
  
  <pre><code>    &lt;div class="card-body parent" style="min-height: 300px;"&gt;
        &lt;!-- ORIGINAL DROPPER BUTTON --&gt;
        &lt;div class="dropdown original-dropper mb-5"&gt;
          &lt;button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Dropdown button
          &lt;/button&gt;
          &lt;div class="dropdown-menu" aria-labelledby="dropdownMenuButton"&gt;
            &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
            &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!-- OTHER DROPPER BUTTON --&gt;
        &lt;button class="btn btn-danger other-dropper mt-5 d-inline"&gt;Other Button&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> $('.parent').on('click', function(e) {
    $(this).css('backgroundColor', 'darkorange');
  });
  
  $('.other-dropper').on('click', function(e) {
    e.stopPropagation();
    $('.original-dropper .dropdown-toggle').dropdown();
    console.log('clicked');
  });
  </code></pre>