Bootstrap 3.1.1 Popover Delegated OK Function

Question

I have a table and last column has a button generated Dynamically.

<button id="popover-row' + row + '" rel="popover">' + docAccessText + ' ' + fileAccessText + '</Button>;

I am creating a Dynamic Popover on click of the Above Button.

// initialize the Popover
var popOverSettings = {
    placement: 'bottom',
    container: 'body',
    html: true,
    selector: '[rel="popover"]',
    content: $('#permissionPopover').html()
}

// bind the popover on body
$("body").popover(popOverSettings).parent().delegate('button.btn_permission_ok', 'click', function(event) {

    // Do something on click of OK
    $("[rel=popover]").popover("destroy");
    $(".popover").remove();

}

}).on("show.bs.popover", function(e) {

    // hide all other popovers before showing the current popover
    $("[rel=popover]").not(e.target).popover("destroy");
    $(".popover").remove();

}).on("shown.bs.popover", function(e) {

      // Do something after showing the popover

});

// click on cancel button removes the popover
$("body").popover(popOverSettings).parent().delegate('div.btn_permission_cancel', 'click', function() {

    $("[rel=popover]").popover("destroy");
    $(".popover").remove();

});

Everything works as expected, but only the first time. When i open this view again, things start duplicating. Popover functions start executing twice. If I close the view again, now popover functions start executing thrice.

I believe that when I am destroying the PopOver on Click of Delegated OK, The events are still there. I tried the below line of code to undelegate the event, but it's not working.

$(event.target).parent().undelegate('button.btn_permission_ok', 'click');

Please suggest.

Answer 1

Not a complete answer, but if you would like one popover per button to be triggered on the button, try using some code like this.

var popOverSettings = {
   trigger: 'manual',
   placement: 'bottom',
   container: 'body',
   html: true,
   content: $('#permissionPopover').html()
};

$(document).on("click", "button[rel='popover']", function(e) {
  var $btn = $(this);
  $btn.popover(popoverOptions);
  $btn.popover("show");
});