2 clicks to open the Popover again

Question

I’m creating a popopver where I inserted a close button. As shown below in the image:

HTML:

<div class="dropdown" style="float: right;">
  <button type="button" class="btn btn-default btn-xs popover-markup" data-placement="bottom" style="margin-right: 10px">Preferências</button>
  <div class="head hide">Opção do cliente <a  class="close" href="#");">&times;</a></div>
  <div class="content hide">
    <div class="form-group">
      <input type="checkbox" name="vehicle" class="checkbox-avatar-store"> Lojas do cliente<br>
    </div>
    <div class="form-group">
      <input type="checkbox" name="vehicle" class="checkbox-competition"> Lojas concorrentes<br>
    </div>
  </div>
</div>

Jquery:

$('.popover-markup').popover({
    html: true,
    title: function () {
        return $(this).parent().find('.head').html();
    },
    content: function () {
        return $(this).parent().find('.content').html();
    }
}).on('shown.bs.popover', function () {
    var $popup = $(this);
    $(this).next('.popover').find('a.close').click(function (e) {
        $popup.popover('hide');
    });
});

After it is closed using the method popover('hide'), as shown in the code above, it is only possible to open again by clicking 2 times on the button Preferences. Why? Shouldn’t I open with just 1 click? How can I solve this problem?

Answer 1

Change the use $popup.popover('hide') for $popup.popover('toggle').

Add the following code to your script:

$('body').on('hidden.bs.popover', function (e) {
    $(e.target).data("bs.popover").inState = { click: false, hover: false, focus: false }
});