单击内部时，Bootstrap 弹出窗口正在关闭

Question

我有一个 bootstrap popover，它的内容是一个kendo Ui 颜色选择器小部件。

当您单击颜色选择器小部件时，即使该trigger选项设置为，弹出窗口也会关闭focus。

为什么？如何保持弹出框打开，直到在弹出框外单击？

<a id="popover" href="#">Color Picker</a>

var $kendoColorPicker = $("<div></div>").kendoFlatColorPicker({
    value: "#ffffff"
});

$("#popover").popover({
    container: "body", 
    content: $kendoColorPicker, 
    html: true, 
    placement: "bottom", 
    trigger: "focus"
});

在此处查看现场演示：jsfiddle

Answer 1

一种不同的方法：

function getContent() {
  console.log("getContent");
  return $("<div></div>")
    .kendoFlatColorPicker({
    value: "#ffffff"
  }).click(function(event) {
    event.stopPropagation();
  });
}

$("#popover").popover({
    container: "body",
    content: getContent,
    html: true,
    placement: "bottom",
    trigger: "manual"}
).click(function(event) {
  $("#popover").popover('show')
  event.stopPropagation();
})

$(document).click(function() {
  $("#popover").popover('hide')
})

js小提琴

但由于某种原因滑块不起作用

我认为您应该使用替代解决方案（例如“频谱”）

Answer 2

这是user1119279 的答案的稍微简化和概括的版本：

jQuery(function ($) {
  $("[data-toggle='popover']").popover({trigger: "click"}).click(function (event) {
    event.stopPropagation();

  }).on('inserted.bs.popover', function () {
    $(".popover").click(function (event) {
      event.stopPropagation();
    })
  })

  $(document).click(function () {
    $("[data-toggle='popover']").popover('hide')
  })
})

此版本还保留了多次单击触发按钮会切换弹出窗口的行为。