如果与 Prototype JS 一起使用，Popover 会隐藏父元素 [英] Popover hides parent element if used with Prototype JS

问题描述

更新到 bootstrap 2.3.0 后，我注意到弹出框工具提示的奇怪行为.

After updating to bootstrap 2.3.0 I noticed strange behaviour of popover tooltip.

如果您进入该字段并尝试导航离开，则工具提示将消失并隐藏输入字段.此问题仅在最新版本的引导程序中出现，不确定究竟发生了什么变化，但 2.2.2 与 Prototype 配合良好.

If you enter the field and try to navigate away, tooltip would disappear and hide input field. This issue occurs only with latest version of bootstrap, not sure what exactly was changed, but 2.2.2 works well with Prototype.

jQuery.noConflict();
jQuery('input[data-content]').popover({
    trigger: 'focus'
});

这是工作示例:http://jsfiddle.net/U6EDs/4/>

推荐答案

这个 github issue https://github.com/twitter/bootstrap/issues/6921 描述了你所看到的.我正在复制问题中的信息.

This github issue https://github.com/twitter/bootstrap/issues/6921 describes what you are seeing. I am copying the information from the issue.

bootstrap-tooltip.js 中的这些行导致了问题:

these lines in bootstrap-tooltip.js cause the problem:

  , hide: function () {
  var that = this
    , $tip = this.tip()
    , e = $.Event('hide')   ///this line

  this.$element.trigger(e)  /// this line
  if (e.isDefaultPrevented()) return //and this line 

PrototypeJS 向 Element 原型添加方法，因此当 jQuery 尝试触发元素上的 hide() 方法时，它实际上触发了 PrototypeJS hide() 方法，它等价于 jQuery hide() 方法并将元素的样式设置为 display:none;

PrototypeJS adds methods to the Element prototype so when jQuery tries to trigger the hide() method on an element it is actually firing the PrototypeJS hide() method, which is equivalent to the jQuery hide() method and sets the style of the element to display:none;

你有几个选择

1. 去掉js文件上面标记的行
2. 将事件重命名为其他名称(不隐藏)
3. 使用 BootStrap 的 PrototypeJS fork(目前适用于 2.3.2)

http://github.com/jwestbrook/bootstrap-prototype

*****免责声明***

*****DISCLAIMER***

我是目前正在将 BootStrap JS 组件移植到 PrototypeJS 的开发人员

I am the developer that is currently porting the BootStrap JS components to PrototypeJS

这篇关于如果与 Prototype JS 一起使用，Popover 会隐藏父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！