问如果与原型JS一起使用，Popover将隐藏父元素

EN

这篇github issue https://github.com/twitter/bootstrap/issues/6921描述了你所看到的。我正在复制这期杂志中的信息。

bootstrap-tooltip.js中的以下几行代码会导致问题：

  , 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将方法添加到元素原型中，因此当jQuery尝试在元素上触发hide()方法时，它实际上会触发PrototypeJS hide()方法，该方法等同于jQuery hide()方法，并将元素的样式设置为display:none;

您有几个选择

1. 在js文件中删除上面标记的行
2. 将事件重命名为其他名称(而不是隐藏)
3. 使用BootStrap的PrototypeJS分支(当前适用于2.3.2)

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

*免责声明*

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

我知道这是一个老问题，但我只是(再次)遇到了这个问题，上面的答案对我来说是行不通的。我最终找到了一个不需要进入任何库的解决方案。这个想法是在元素被隐藏后显示它。没有闪烁，而且效果很好。

jQuery(function () {
    jQuery.noConflict();
        jQuery('input[data-content]').popover({
            trigger: 'focus'
        }).on('hidden.bs.popover', function(){
            jQuery(this).show();
        });
});

您可以对工具提示使用相同的技术，只需使用on('hidden.bs.tooltip'), ...

注意，我使用Bootstrap 3.0.0进行大部分个人测试。以下是使用BS 2.3的问题的更新小提琴：http://jsfiddle.net/calypsonian/U6EDs/13/

我花了一些时间调查这件事。

这就是为什么会发生这种情况。

Prototype的策略是使用新的行为对DOM元素类进行隐藏扩展，例如“”。等同于：

HTMLElement.prototype.hide = function(...) {...};

jQuery做了一个假设，如果一个元素有一个与事件同名的函数，那么当该事件被触发时，它就被认为是该元素的默认行为。例如，这对于'focus'，‘.focus()’等事件很有用，在这些事件中，既有名为'focus‘的事件，也有元素focus上的匹配函数。当您调用jQuery的event.preventDefault()时，它实际上并不是阻塞的默认行为。相反，它是相反的--如果您不调用event.preventDefault()，那么jQuery将查找与事件同名的函数，如果它存在，则调用它。

下面是手动调用“默认行为”函数的jQuery src：https://github.com/jquery/jquery/blob/d837f119c3729565103005d5d7fa89e1dd8110cb/src/event.js#L338

因此，我们就有了问题。Prototype使用新功能扩展了基本HTMLElement原型(即“隐藏”)。当触发相同名称的事件时，jQuery将这些函数视为默认行为。Bootstrap的JS触发了一个同名的事件('hide')，这会错误地导致jQuery调用Prototype的Element.hide()函数。

我将根据这些信息来研究解决方案。可能是这样的：

jQuery(window).load(function() {
    // Defer this code until after the window 'load' event finishes firing
    setTimeout(function() {
        window.HTMLElement &&
        window.HTMLElement.prototype.hide &&
        delete window.HTMLElement.prototype.hide;
    }, 0);
});