獲取酥料餅留在jQuery的

Question

開我有一些jQuery代碼看起來像這樣：

// compile template through underscore templating  
var compiledTmpl = _.template(eventTemplate); 

// configure popover settings and dynamic mark up 
jQuery(this).closest(".item").popover({ 
    trigger:'manual', 
    html:true, 
    "content":compiledTmpl(eventData), 
    "template": popoverTemplate 
}); 

// show the popover 
jQuery('.field-content').hover(function(){ 
    jQuery(this).closest(".item").popover('show'); 
}); 

jQuery(this).popover().mouseout(function (e) {  
    jQuery(this).closest(".item").popover('hide');  
}); 

我想有酥料餅保持開放，當我去到老鼠進去，但不管我怎麼努力，它一直躲藏起來。有人知道爲什麼或者有沒有人可以幫助我？

Answer 1

我終於能夠從這個職位找出解決我的問題上SO： How can I keep bootstrap popover alive while the popover is being hovered?

雖然不是標記的答案，因爲我沒有看到它適合完全回答我的問題，我使用@OkezieE發佈的答案：

這是我的最終代碼的樣子：

// compile template through underscore templating  
var compiledTmpl = _.template(eventTemplate); 
// configure popover settings and dynamic mark up 
jQuery(this).closest(".item").popover({trigger:'manual', html:true, 
    "content":compiledTmpl(eventData), "template": popoverTemplate}) 
// show the popover and allows popover to stay open on mouseenter 
.on("mouseenter", function() { 
    var _this = this; 
    jQuery(this).popover("show"); 
    jQuery(".popover").on("mouseleave", function() { 
     jQuery(_this).popover('hide'); 
    }); 
}).on("mouseleave", function() { 
    var _this = this; 
    setTimeout(function() { 
     if (!jQuery(".popover:hover").length) { 
      jQuery(_this).popover("hide"); 
     } 
    }, 100); 
}); 

我打算把這個標記爲我的答案，因爲它對我有用。

Answer 2

這裏的問題在於彈出窗口並未連接到DOM元素。所以當你移動你的鼠標時，你正在離開觸發區域。我在使用mousein/mouseout設計解決方案時遇到了困難，因爲用戶需要從觸發區域移動到彈出窗口，並且它們之間存在「死空間」。

如何改變點擊？然後彈出窗口將被點擊切換。也許會延遲一段時間，所以它會在一段時間後自動關閉。使用點擊的另一個優點是觸摸用戶也可以看到彈出窗口。

Answer 3

你可以嘗試從鼠標移出排除酥料餅的容器：

jQuery(this).popover().mouseout(function (e) { 
    var target = $(e.target); 
    if (!target.parents('.popover').length && !target.hasClass('.popover')) { 
     jQuery(this).closest(".item").popover('hide'); 
    } 
});