title: Catching .bs.dropdown Events
body: <p>I'm trying to catch the events from bootstraps dropdown. Nothing seems to work, though clearly I'm doing something wrong.  </p>
  
  <p>The code, stripped down to just the problem ...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"&gt;
          &lt;title&gt;Demo&lt;/title&gt;
          &lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="navbar"&gt;
              &lt;a class="nav-link dropdown-toggle" href="#" id="search_drop" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                Search
              &lt;/a&gt;
  
              &lt;div class="dropdown-menu" aria-labelledby="search_drop"&gt;
                  &lt;h2 class="text-primary"&gt;Search&lt;/h2&gt;
                  &lt;form class="navbar-form navbar-right navbar-expand-xl" id="header-searchForm"&gt;
                      &lt;input type="text" class="form-control" placeholder="enter terms" name="Search" aria aria-selected="true" id="search_str" required="true"&gt;
                      &lt;button type="submit" class="btn btn-sm btn-primary"&gt;
                          Search
                      &lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;      
          &lt;/div&gt;
  
          &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $('#search_drop').on('show.bs.dropdown', function() {
                  console.log("show");
              }).on('shown.bs.dropdown', function() {
                  console.log("shown");
              }).on('hide.bs.dropdown', function() {
                  console.log("hide");
              }).on('hidden.bs.dropdown', function() {
                  console.log("hidden");
              });
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Not a single one of the <code>console.log</code> statements is being hit.</p>