Close button of the bootstrap popover not working properly

Question

I have a problem with the close button of the popover. The first time, i close the popover is fine, but the moment i open another one and try to close it, it does not work anymore.

Here my JS for the popover:

$(function () {
  $('[data-toggle="popover"]').popover({
    "html": true,
    "title": '<span class="text-info"><strong>title</strong></span>'+
            '<button type="button" id="close" class="close" >&times;    </button>',
    "content": function(){
        var div_id =  "tmp-id-" + $.now();
        return details_in_popup($(this).data('url'), div_id);
    }


  }).on('shown.bs.popover', function(e){
  var popover = jQuery(this);
  $('.close').on('click', function(e){
    popover.popover('hide');
  });
 });
});

Any clue what is causing this problem ?

Thanks!

Answer 1

second time a popover is created the $('.close') will get two elements.

if want to hide all popop use

$('[data-toggle="popover"]').popover('hide')