Bootstrap popover странное поведение с 3.3.6

Question

Мне нужно Bootstrap popover в моем подменю навигации. Он работает правильно, когда я открываю меню, есть также кнопка закрытия для popover, но при ее открытии она не работает. Это означает, что он работает с нечетными щелчками, даже с кликами он не работает.

Но в Bootstrap 3.3.2 его все работает правильно

js 
 

 
    $(function() {   
 
     \t var popOverSettings = { 
 
     placement: 'bottom', 
 
     container: 'body', 
 
     html: true, 
 
     selector: '#change-customer', 
 
    \t title: '<a href="#" class="close" >&times;</a>', 
 
     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'); 
 
     }); 
 
     \t \t 
 
    });

<nav class="navbar navbar-default" role="navigation"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Link</a></li> 
 
      <li><a href="#">Link</a></li> 
 
      <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
 
       <ul class="dropdown-menu"> 
 
        <li id="change-customer"><a href="#">Example 1</a></li> 
 
        <li id="ex2"><a href="#">Example 2</a></li> 
 
        <li id="ex3"><a href="#">Example 3</a></li> 
 
        <li id="ex5"><a href="#">Example 4</a></li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
</nav> 
 
<div class="col-md-8" id="customer-popover" style="display: none"> 
 

 
    <input class="typeahead form-control inputbox-shadow" type="text" placeholder="Search Customer"> 
 
</div>

Рабочая версия: Codeply link

Answer 1

Уничтожить поповер, а не скрывать это:

$(this).parents(".popover").popover('destroy');