Estou criando um popopver
no qual inseri nele um botão de fechar. Como mostra abaixo na imagem:
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="#");">×</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');
});
});
Após ele ser fechado usando o método popover('hide')
, como é mostrado no código acima, só é possível abrir novamente clicando 2 vezes no botão Preferências. Por quê? Não deveria abrir dando apenas 1 clique? Como posso resolver esse problema?