title: Bootstrap popover weird behavior with 3.3.6
body: <p>I need Bootstrap popover in my sub-menu navigation. It's working correctly when I open the menu, there is also a close button for the popover but when opening it again it does not work. This means its working with odd clicks, with even clicks it does not work.</p>
  
  <p>But in Bootstrap 3.3.2 its all working properly</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>js 
  
      $(function () {          
         var popOverSettings = {
          placement: 'bottom',
          container: 'body',
          html: true,
          selector: '#change-customer',
       title: '&lt;a href="#" class="close" &gt;&amp;times;&lt;/a&gt;',
          content: function () {
              return $('#customer-popover').html();
          }
      }
      $('body').popover(popOverSettings).on('shown.bs.popover', function(){
              enableTypeAhead();
      });
      $(document).on("click", ".popover .close" , function(){
              $(this).parents(".popover").popover('hide');
          });
          
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-default" role="navigation"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li id="change-customer"&gt;&lt;a href="#"&gt;Example 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li id="ex2"&gt;&lt;a href="#"&gt;Example 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li id="ex3"&gt;&lt;a href="#"&gt;Example 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li id="ex5"&gt;&lt;a href="#"&gt;Example 4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- /.navbar-collapse --&gt;
  &lt;/nav&gt;
  &lt;div class="col-md-8" id="customer-popover" style="display: none"&gt;
  
      &lt;input class="typeahead form-control inputbox-shadow" type="text" placeholder="Search Customer"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Working Version : <a href="http://www.codeply.com/go/KX7iDAfh4X" rel="nofollow">Codeply link</a></p>