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

这里的问题是popover没有连接到DOM元素。因此，当您移动鼠标时，您将移出触发区域。我无法使用mousein / mouseout设想解决方案，因为用户需要从触发区域移动到弹出窗口，并且它们之间存在“死空间”。

如何更改为点击？然后点击将切换弹出窗口。也许延迟它，所以它会在一定时间后自动关闭。使用点击的另一个好处是触摸用户也可以看到弹出窗口。

Answer 2

您可以尝试从mouseout中排除popover容器：

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

Answer 3

我终于能够从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);
});

我打算将此作为我的答案，因为它对我有用。

使用jquery让popover保持开放

3 个答案: