Bootstrap Popover wird geschlossen, wenn Sie innerhalb klicken

Question

Ich habe ein bootstrap popover und sein Inhalt ist ein kendo Ui color picker widget. Wenn Sie in das Farbauswahl-Widget klicken, wird das Popover geschlossen, selbst wenn die Option trigger auf focus gesetzt ist.

Warum? Wie kann man das Popover offen halten, bis ein Klick außerhalb des Popovers gemacht wird?

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

eine Live-Demo Siehe hier: jsfiddle

Answer 1

Sie können durch Entfernen Trigger versuchen: "Fokus" und gelten einige benutzerdefinierte Code

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

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

Answer 2

Eine andere 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

aber aus irgendeinem Grund der Schieber nicht

funktioniert glaube ich Ihnen eine alternative Lösung (zum Beispiel "Spektrum")