title: How to catch Bootstrap navbar dropdown event?
body: <p>I'm using the basic Twitter Bootstrap navbar for my menu, and I now want to show notifications in a dropdown inspired by the system here on Stackoverflow. To accomplish this I want to call the api when clicking the dropdown, for which I need to "catch" the dropdown event. According to <a href="http://getbootstrap.com/javascript/#dropdowns-events" rel="nofollow">the docs</a>, I need to catch the event like so:</p>
  
  <pre><code>$('#myDropdown').on('show.bs.dropdown', function () {
    // do something…
  })
  </code></pre>
  
  <p>So I've got a <a href="http://jsfiddle.net/gru70kcs/" rel="nofollow">working fiddle here</a>, but when I use the exact same code in my own html (see below) it doesn't work anymore. Does anybody know what's wrong with the code below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;    
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $('#jajaja').on('show.bs.dropdown', function () {
              alert('Come on lets show the dropdown!!');
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="navbar navbar-default" role="navigation"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href="/"&gt;My Website&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar" class="navbar-collapse"&gt;
                      &lt;ul class="nav navbar-nav navbar-right" id="jajaja"&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="" id="notifications-header" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Notifications &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;ul id="notifications" class="dropdown-menu" role="menu"&gt;
                                  &lt;li&gt;&lt;span class="glyphicon glyphicon-refresh text-center" aria-hidden="true"&gt;&lt;/span&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>