title: Bootstrap: Click event not working when button inside bootstrap dropdown
body: <p><strong>Problem</strong></p>
  <p>Event handler not called when button inside Bootstrap dropdown.</p>
  <p><strong>What I want</strong></p>
  <p>When the dropdown button with id <code>repeat_booking_button</code> is clicked, I want the event handler to be called.</p>
  <p><strong>What i've tried</strong></p>
  <p>I've moved the button outside of the dropdown and the event handler is called as expected <em>'Scenario 1'</em>.</p>
  <p><em><strong>Scenario 1 [Working]</strong></em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;button_wrapper&quot;&gt;
      &lt;button type=&quot;button&quot; id=&quot;repeat_booking_button&quot;&gt;Repeat Booking&lt;/button&gt;
      &lt;div class=&quot;dropdown&quot;&gt;
          &lt;button class=&quot;btn dark_grey_button dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
          Options
          &lt;/button&gt;
          &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><em><strong>Scenario 2 [Not Working]</strong></em></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;button_wrapper&quot;&gt;
      &lt;div class=&quot;dropdown&quot;&gt;
          &lt;button class=&quot;btn dark_grey_button dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
          Options
          &lt;/button&gt;
          &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;dropdown-item&quot; id=&quot;repeat_booking_button&quot;&gt;Repeat Booking&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><em><strong>Javascript</strong></em></p>
  <pre class="lang-js prettyprint-override"><code>$(document).on('click', '#repeat_booking_button', function() {
      $(&quot;#repeat_booking_overlay&quot;).show();
      $(&quot;.page_mask_allocation&quot;).show();
  });
  </code></pre>
  <p>I'm guessing having an id attribute inside the dropdown conflicts with the functionality of the dropdown?</p>
  <p><strong>[UPDATE]</strong></p>
  <p>In a included custom javascript file I found the following function which was contributing to the error. Removed and the system works as expected.
  :</p>
  <pre class="lang-js prettyprint-override"><code>$('body').on(&quot;click&quot;, &quot;.dropdown-menu&quot;, function (e) {
    $(this).parent().is(&quot;.show&quot;) &amp;&amp; e.stopPropagation();
  });
  </code></pre>
  <p>I'd like to keep this included as it keeps the dropdown open when the mouse moves away from the dropdown. Is there any solution to this?</p>