jquery - 引导弹出框不适用于第一个 mouseenter 事件

Question

我使用代码如下

<a class="reply"  data-content="this is the mail" 
data-original-title="this is the title" rel="popover">this</a>

我触发了jquery事件如下

$(document).on("mouseenter",".reply",function(event){
   $(this).popover({placement:'bottom'});
});

但问题是在第一个悬停事件上没有显示弹出框

从第二个事件 popover 开始正常显示......这种活动的原因是什么以及如何纠正它......

score 1 · Accepted Answer

您需要添加trigger: 'hover'或添加trigger: 'manual'到弹出框的选项中。就个人而言，我会用以下内容替换您的javascript。

$(function(){
  $('.reply').popover({
    placement: 'bottom',
    trigger: 'hover'
  })
})

编辑，如果你必须使用你设置的javascript，试试这个

$(document).on("mouseenter",".reply",function(event){
  $(this).popover({
    placement:'bottom', 
    trigger: 'hover'
  }).popover('show');
});

score 1 · Accepted Answer

我找到了添加以下代码的答案使其工作

$(document).on("mouseenter",".reply",function(event){
  $(this).popover({placement:'bottom'});
  $(this).popover('toggle');
});

score 0 · Accepted Answer

您应该使用该selector属性来委托 Popover 插件（请参阅文档）。像这样：

$('body').popover({
  placement: 'bottom',
  trigger: 'hover',
  selector: '.reply'
});

_{注意：在实践中，比推荐的范围更窄的代表'body'。}

score 0 · Accepted Answer

只需选择您的元素，然后通过悬停调用弹出框

$("[rel=popover]").popover({trigger:"hover"});

4 回答 4