如果与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/

Here is working example: http://jsfiddle.net/U6EDs/4/

推荐答案

此github问题 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分支(当前适用于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屋！