title: Bootstrap Dropdown Not Closing On Item Click
body: <p>I have a Bootstrap (version 2.3.2) dropdown within a nav ul element as per the HTML below.  When I click an item in the dropdown in IE then the drop down list closes - this seems to be the correct behaviour - and is certainly what I want.  In Firefox, Chrome and Safari the drop down list does not close.</p>
  
  <pre><code>&lt;nav class="navbar navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;a class="brand" href="/"&gt;
              &lt;span class="title"&gt;Doc Assembler&lt;/span&gt;
          &lt;/a&gt;
  
          &lt;div class="loader pull-left" data-bind="css: { active: showLoader }"&gt;
              &lt;i class ="icon-spinner icon-2x icon-spin" &gt;&lt;/i&gt;
          &lt;/div&gt;
  
          &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/a&gt;
  
          &lt;div class="nav-collapse collapse"&gt;
              &lt;ul class="nav" data-bind="foreach: navRoutes"&gt;
                  &lt;li&gt;&lt;a data-bind="css: { active: isActive() }, attr: { href: hash }, text: name"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;ul class="nav"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;
                          &lt;i class="icon-cogs"/&gt; Admin&lt;b class="caret"&gt;&lt;/b&gt;
                      &lt;/a&gt;
                      &lt;ul class="dropdown-menu pull-right"&gt;
                          &lt;!-- ko foreach: adminRoutes --&gt;
                          &lt;li&gt;&lt;a data-bind="attr: { href: hash }, html: caption"&gt;&lt;/a&gt;
                          &lt;!-- /ko --&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a data-bind="click: logOff" href="#"&gt;&lt;i class="icon-signout"/&gt; Log Off&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I can see that the clearMenus method from bootstrap is being called in IE, but not in the other browsers when an item is clicked.  clearMenus is called in all browsers when the menu is opened.  I think it may have something to do with the following code from bootstrap:</p>
  
  <pre><code>$(document)
      .on('click.dropdown.data-api', clearMenus)
      .on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
      .on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
      .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
  </code></pre>
  
  <p>I know there were some problems with this in an earlier version of bootstrap, however I have not been able to find anything detailing similar problems in the current version.</p>