单击选择标记选项。 Bootstrap popover关闭

Question

我不懂英语。我很遗憾地交换毫无意义的短语。

点击选择标签选项。 Bootstrap popover关闭。

Jsfiddle

注：问题Mozilla Firefox浏览器。

// Bootstrap Popover 
 
$('body').popover({ 
 
    selector: '[data-popover]', 
 
    html: true, 
 
    trigger: 'click hover', 
 
    title: function() { 
 
     return $('.select_box').html(); 
 
    }, 
 
    content: '...', 
 
    placement: 'bottom', 
 
    delay: { 
 
     show: 50, 
 
     hide: 400 
 
    } 
 
});

<button class='btn btn-primary' data-popover="true">hover here</button> 
 

 

 
<div class="select_box hidden"> 
 
    <select class="form-control"> 
 
     <option>Day</option> 
 
     <option>Week</option> 
 
     <option>Month</option> 
 
     <option>...</option> 
 
    </select> 
 
</div>

Answer 1

select元素具有跨浏览器不一致的行为，以及相关的事件可以在不同的时刻被触发。

对于jQuery来说，您可以检查当前触发鼠标离开的目标是否为select，如果是，则重新绑定处理程序。

代码：

if (obj.currentTarget) { 
    container = $(obj.currentTarget).siblings('.popover') 
    timeout = self.timeout; 
    container.one('mouseenter', function() { 
     //We entered the actual popover – call off the dogs 
     clearTimeout(timeout); 

     var bindLeave = function() { 
      container.one('mouseleave', function (e) { 
       if ($(e.target).is('select')) { 
        bindLeave(); 
        return; 
       } 
       $.fn.popover.Constructor.prototype.leave.call(self, self); 
      }); 
     } 

     bindLeave(); 
    }) 
} 

演示：http://jsfiddle.net/IrvinDominin/tskf0eoL/