Popover ẩn phần tử cha nếu được sử dụng với Prototype JS

Question

Sau khi cập nhật lên bootstrap 2.3.0 Tôi nhận thấy hành vi lạ của chú giải công cụ bật lên.

Nếu bạn nhập trường và cố gắng điều hướng đi, chú giải công cụ sẽ biến mất và ẩn trường nhập. Vấn đề này xảy ra chỉ với phiên bản mới nhất của bootstrap, không chắc chắn chính xác những gì đã được thay đổi, nhưng 2.2.2 hoạt động tốt với Prototype.

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

Dưới đây là ví dụ làm việc: http://jsfiddle.net/U6EDs/4/

Answer 1

này vấn đề github https://github.com/twitter/bootstrap/issues/6921 mô tả những gì bạn đang nhìn thấy. Tôi đang sao chép thông tin từ vấn đề.

những dòng này trong bootstrap-tooltip.js gây ra vấn đề:

, 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 thêm phương pháp để nguyên mẫu tử nên khi jQuery cố gắng để kích hoạt các phương pháp hide() trên một yếu tố đó là thực sự bắn các PrototypeJS hide() phương pháp , đó là tương đương với phương pháp jQuery hide() và thiết lập phong cách của nguyên tố này để display:none;

Bạn có một vài lựa chọn

1. loại bỏ các đường đánh dấu ở trên trong js nộp
2. đổi tên sự kiện vào cái gì khác (không ẩn)
3. sử dụng PrototypeJS ngã ba của bootstrap (hiện làm việc với 2.3.2)

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

***** sỰ TỪ BỎ ***

tôi là nhà phát triển mà hiện tại đang porting các thành phần bootstrap JS để PrototypeJS

Answer 2

tôi "cố định" lỗi bằng cách chỉnh sửa Bootstrap JS theo cách này:
(nhận xét ra dòng 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

Tôi biết đây là một câu hỏi cũ, nhưng tôi chỉ chạy vào này (một lần nữa) và các câu trả lời ở trên sẽ không hiệu quả đối với tôi. Tôi đã tìm ra một giải pháp mà không cần xâm nhập vào bất kỳ thư viện nào. Ý tưởng là để hiển thị các yếu tố sau khi nó được ẩn. Không có nhấp nháy và nó hoạt động tốt đẹp.

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

Bạn có thể sử dụng kỹ thuật tương tự cho tooltips, chỉ cần sử dụng on('hidden.bs.tooltip'), ...

Note, tôi đang sử dụng 3.0.0 Bootstrap cho hầu hết các thử nghiệm cá nhân của tôi. Dưới đây là một fiddle được cập nhật từ các câu hỏi trong đó sử dụng BS 2.3: http://jsfiddle.net/calypsonian/U6EDs/13/

Answer 4

Đối với tôi thì càng tốt (mà không thay đổi mã nguồn Bootstrap) là để ngăn chặn sự kiện và bằng tay loại bỏ "trong" lớp học mà giấu tooltip:

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

}); 

Chỉ có vấn đề là nó ngăn chặn việc kích hoạt sự kiện "hidden.bs.tooltip".Nhưng nếu bạn không nhớ, tôi khuyên bạn nên sử dụng giải pháp này vì nó không gây ra nhấp nháy

Answer 5

Tôi đã dành một chút thời gian để xem xét điều này.

Đây là lý do tại sao điều đó xảy ra.

Chiến lược của nguyên mẫu là mở rộng các lớp phần tử DOM với các hành vi mới, ví dụ như 'ẩn'. Tương đương với:

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

jQuery làm cho một giả định rằng nếu một phần tử có một hàm có cùng tên như một sự kiện, sau đó nó được coi là hành vi mặc định của nguyên tố này khi sự kiện được kích hoạt. Ví dụ, điều này rất hữu ích cho các sự kiện 'tập trung', 'mờ', vv, trong đó có cả một sự kiện theo tên 'tập trung' và một hàm phù hợp trên phần tử .focus(). Khi bạn gọi số event.preventDefault() của jQuery, nó không thực sự là chặn hành vi mặc định. Thay vào đó là nghịch đảo - nếu bạn không gọi event.preventDefault(), thì jQuery sẽ tìm một hàm có cùng tên với sự kiện và sau đó gọi hàm đó nếu nó tồn tại.

Đây là src jQuery điều đó bằng tay gọi là "hành vi mặc định" chức năng: https://github.com/jquery/jquery/blob/d837f119c3729565103005d5d7fa89e1dd8110cb/src/event.js#L338

Do đó, chúng tôi có vấn đề của chúng tôi. Prototype mở rộng nguyên mẫu HTMLElement cơ bản với các hàm mới (cụ thể là 'ẩn'). jQuery coi các hàm này là các hành vi mặc định khi một sự kiện có cùng tên được kích hoạt. JS của Bootstrap kích hoạt một sự kiện có cùng tên ('ẩn'), điều này gây nhầm lẫn cho jQuery gọi hàm Element.hide() của Prototype.

Tôi sẽ xem xét giải pháp dựa trên thông tin này. Có lẽ cái gì đó dọc theo dòng:

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

Bạn có thể hiển thị nó một lần nữa về sự kiện MouseLeave như,

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

Một giải pháp khả thi là để luôn luôn hiển thị các yếu tố thông qua CSS.

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

Answer 8

Tôi đã thêm một kiểu CSS quan trọng để ghi đè kiểu phần tử mà nguyên mẫu thêm. Điều này làm việc cho tôi bởi vì không có gì nên ẩn phần tử.

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