Question

我有一张桌子，最后一列有一个动态生成的按钮。

<button id="popover-row' + row + '" rel="popover">' + docAccessText + ' ' + fileAccessText + '</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();

});

一切都按预期工作，但只是第一次。当我再次打开这个视图时，事情开始重复。弹出功能开始执行两次。如果我再次关闭视图，现在popover函数开始执行三次。

我相信当我在点击委托确定时销毁PopOver时，事件仍在那里。我尝试了以下代码行来取消事件，但它没有工作。

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

请建议。

Answer 1

不是一个完整的答案，但如果你想在按钮上触发每个按钮一个弹出框，请尝试使用这样的代码。

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");
});

Bootstrap 3.1.1 Popover委派OK函数

1 个答案: