内部をクリックするとブートストラップポップオーバーが終了します

Question

ブートストラップポップオーバーがあり、その内容はkendo Ui color picker widgetです。

カラーピッカーウィジェットをクリックすると、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

をあなたはトリガーを削除することで試すことができます： "フォーカス" といくつかのカスタムコードを適用

$(document).mouseup(function (e) 
 
{ 
 
    var container = $(".popover"); 
 

 
    if (!container.is(e.target) 
 
     && container.has(e.target).length === 0) 
 
    { 
 
     container.popover("hide"); 
 
    }

Answer 2

異なるapproch：

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') 
}) 

「フォーカス」 `：

jsFiddle

が、何らかの理由でスライダーが

動作しないは、私はあなたが