javascript - 如何在 Bootstrap 弹出窗口中使用 Select2

Question

我想知道如何让我的 Select2 下拉列表在 Bootstrap 弹出框内工作。我知道问题是在启动 popover-event-click 后加载了 popover 内容，因此 Select2 的 JS 代码将无法工作。我只是不知道如何修复它。

例子: http://hammr.co/8234009/6/problems.html

尝试在名为“Aaaah!”的第四个问题上按“提交”你会看到弹出窗口。然后尝试按“Alabama”-dropdown(这是 Select2 下拉菜单)它不会工作(因为 JS 没有启动，因为弹出内容在 DOM 之后加载)。

有人知道如何让它工作吗？

Answer 1

有可能

多亏了 bootstrap popover callback modification

/* override bootstrap popover to include callback */

var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function() {
showPopover.call(this);
if (this.options.showCallback) {
this.options.showCallback.call(this);
}
}

$(this).popover({
container:'#maincont',
placement:'right',
 html : true,
 title: function() {
          return $('#'+pk).html();
        },
  content: function() {

          return $('#'+pk).clone();

        },
        showCallback : function() {

$(".popover-content select").select2({
containerCss : {"display":"block"},   
allowClear: true,
});
},

});