Popover隱藏父元素，如果與原型JS一起使用

Question

更新到引導2.3.0後，我注意到popover tooltip的奇怪行爲。

如果您輸入該字段並試圖離開，工具提示將消失並隱藏輸入字段。只有最新版本的bootstrap纔會出現此問題，但不確定究竟發生了什麼變化，但2.2.2與Prototype一起使用效果良好。

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

這裏是工作示例：http://jsfiddle.net/U6EDs/4/

Answer 1

這github上的問題https://github.com/twitter/bootstrap/issues/6921描述你所看到的。我正在複製這個問題的信息。

在自舉-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. 使用自舉（目前與2.3.2）

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

的PrototypeJS叉

*****免責聲明***

我當前移植自舉JS組件PrototypeJS

開發商

Answer 2

我通過這種方式編輯引導JS「固定」的錯誤：
（註釋掉線this.$element.trigger(e)）

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

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

Answer 3

我知道這是一個老問題，但我只是碰到了這個（再次）和上述答案不適合我。我最終找到了一個解決方案，而不需要入侵任何庫。它的想法是在元素被隱藏後顯示元素。沒有閃爍，它很好。

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

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

請注意，我用的引導3.0.0大多數我個人的測試。下面是從問題，它使用BS 2.3更新的小提琴： http://jsfiddle.net/calypsonian/U6EDs/13/

Answer 4

對於我越好（在不改變引導源代碼）是爲了防止事件並手動刪除「中的」類隱藏工具提示：

jQuery("input").on('hide.bs.tooltip', function(e) { 
    e.preventDefault(); 
    $("div.tooltip.in").removeClass('in'); 

}); 

唯一的問題是它可以防止觸發「hidden.bs.tooltip」事件。但如果你不介意，我建議使用這種解決方案，因爲它不會導致閃爍

Answer 5

我花了一些時間看着這個。

這就是它發生的原因。

原型的策略是擴展具有新行爲的DOM元素類，例如'hide'。等效的：

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

jQuery讓，如果一個元素都有相同的名稱作爲事件的功能，那麼它被認爲是默認行爲的元素在觸發該事件的假設。例如，這對於事件'焦點'，'模糊'等是有用的，其中既有名稱爲'焦點'的事件又有元素.focus()上的匹配函數。當你調用jQuery的event.preventDefault()時，它實際上並不是阻止的默認行爲。相反，它是相反的 - 如果你不調用event.preventDefault()，然後jQuery查找與該事件同名的函數，然後調用它，如果它存在。

這裏是jQuery的SRC是手動調用「默認行爲」功能： https://github.com/jquery/jquery/blob/d837f119c3729565103005d5d7fa89e1dd8110cb/src/event.js#L338

因此，我們有我們的問題。 Prototype用新函數（即'hide'）擴展了基本的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); 
}); 

Answer 6

您可以在鼠標離開事件一樣再次顯示，

jQuery(function(){ 
    jQuery('[data-toggle="popover"]').popover().on('mouseleave',function(){ 
     $(this).show(0); // show it again when mouse leave event fires 
    }); 
}); 

Live Demo

Answer 7

一個可能的解決方案是始終顯示通過CSS的元素。

[data-toggle=tooltip] { 
    display: block!important; 
} 

Answer 8

我添加了一個重要的CSS樣式來覆蓋原型添加的元素樣式。這適用於我，因爲沒有什麼應該隱藏元素。

#elemId{ 
    display: block!important; /* or whatever the original display was */ 
}