Bootstrap 3.1.1 Popover 委托 OK 函数答案

【问题标题】：Bootstrap 3.1.1 Popover Delegated OK FunctionBootstrap 3.1.1 Popover 委托 OK 函数
【发布时间】：2016-01-12 08:28:17
【问题描述】：

我有一个表格，最后一列有一个动态生成的按钮。

<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 函数开始执行三次。

我相信当我在点击 Delegated OK 时销毁 PopOver 时，事件仍然存在。我尝试了下面的代码行来取消对事件的委托，但它不起作用。

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

请提出建议。

【问题讨论】：

只是一个提示：当你手动想要触发一个弹出框（显示/隐藏）时，你必须在选项中设置trigger: 'manual'。对不起，如果我错过了什么，没有时间深入挖掘。
@ZoltánTamási 让我试一试。
另外，还不清楚为什么要在 body 上初始化 popover。如果在按钮上触发了弹出框，我认为您应该对其进行初始化。
但这里的问题是我为每个按钮设置了动态 rowid。而且我需要在多个按钮上显示动态弹出框。我正在触发显示方法并显示弹出框的事件以加载初始化数据
没关系，可以绑定document上的委托点击事件，使用event.target获取按钮元素。抱歉，我目前没有时间给出完整的答案。

标签： javascript jquery html twitter-bootstrap popover

【解决方案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");
});

【讨论】：