Khởi động cửa sổ khởi động & khởi tạo lại chỉ sau mỗi giây

Question

Tôi muốn hủy theo chương trình & tạo lại một cửa sổ bật lên Bootstrap cụ thể. Vì vậy, những gì tôi làm là:

$('#popoverspan').popover('destroy'); 
$('#popoverspan').popover({placement : 'bottom', trigger : 'hover', content : 'Here it is!'}); 

Và nó chỉ hoạt động mỗi lần thứ hai. Tôi nghĩ rằng đó là vấn đề thời gian cần thiết để phá hủy cửa sổ bật lên, nhưng thậm chí thêm một sự chậm trễ giữa hai đường dây cũng không giúp được gì. Tôi đã tạo lại sự cố trong JSFiddle: http://jsfiddle.net/Lfp9ssd0/10/

Tại sao lại như vậy? Nó đã được gợi ý rằng nó hoạt động, ví dụ: trong Twitter Bootstrap Popover with dynamically generated content via ajax và Bootstrap Popover Reinitialization (To refresh Content)

Nó hoạt động tốt khi tôi bỏ qua việc hủy, nhưng tôi không chắc điều gì sẽ xảy ra khi tôi tạo một cửa sổ bật lên khác cho một phần tử mà không phá hủy phần tử hiện có. Nó được khởi động lại hay nó tạo ra một cửa sổ popover mới với việc mất quyền truy cập vào cái cũ?

Answer 1

Tự khắc phục. Rõ ràng .popover('destroy') là không đồng bộ và việc tạo ngay lập tức một cửa sổ bật lên khác không thành công, trong khi cửa sổ bật lên trước đó bị hủy. Tôi đã thử thêm độ trễ bằng cách sử dụng alert, không thành công vì một số lý do. Sử dụng setTimeout() trước khi tạo popover mới không phải là thanh lịch nhất, nhưng giải pháp làm việc:

$('#popoverspan').popover('destroy'); 
setTimeout(function() { 
    $('#popoverspan').popover({ 
     placement : 'bottom', 
     trigger : 'hover', 
     content : 'Here is new popover!' 
    }); 
}, 200); 

200 ms dường như đủ, nhưng nó có thể cần finetuning trong các trường hợp khác.

Answer 2

Tôi gặp vấn đề tương tự như được mô tả ở đây. Sau khi tìm kiếm rộng rãi, tôi tìm thấy một cách để thay đổi nội dung của cửa sổ bật lên mà không phải phá hủy nó trước. Chỉ cần khởi tạo cửa sổ bật lên mà không có tùy chọn nội dung được chỉ định.

$('#popoverspan').popover({ 
    placement : 'bottom', 
    trigger : 'hover', 
}); 

Lưu ý rằng việc bật lên trên không xác định nội dung. Cửa sổ bật lên không thể được hiển thị, nó không có nội dung. Bây giờ xác định điều kiện mà sau đó dẫn đến loại văn bản khác nhau được hiển thị trong cửa sổ bật lên.

if (condition_1) { 
    $("#popoverspan").data('bs.popover').options.content = "Something important here!" 
} 
else { 
    $("#popoverspan").data('bs.popover').options.content = "This is also important!" 
} 

Bây giờ chúng ta đã sẵn sàng để hiển thị các popover.

$("#popoverspan").popover('show'); 

Điều này làm việc cho tôi như của Bootstrap 3.0. Tất nhiên, khi bạn đã sẵn sàng, bạn luôn có thể phá hủy hoặc ẩn cửa sổ bật lên như thường lệ khi sự kiện thích hợp xảy ra trên trang của bạn.

Cập nhật: Nếu bạn chỉ cần thay đổi văn bản trong popover sau popover là đã hiển thị, bạn có thể chủ yếu là sử dụng kỹ thuật tương tự. 1) Có được một tổ chức của DOM rằng popover được đính kèm sau đó thay đổi nội dung và 2) hiển thị popover một lần nữa. Ví dụ dưới đây:

$("#popoverspan").data('bs.popover').options.content = "some new text"; 
$("#popoverspan").popover('show'); 

Answer 3

@Deniz câu trả lời là rất tốt, nhưng nếu bạn muốn thay đổi tiêu đề/nội dung sau popover đã được hiển thị và bạn đang ở trong các phiên bản cũ Bootstrap (tôi là 3.3.1), bạn nên sử dụng $('.your_popover_target').data('popover').options.content = "new text" thay vì .data('bs.popover'), tiếp theo là $('.your_popover_target').popover('show');

Answer 4

Tôi đã thử phương pháp setTimeout và vì lý do nào đó nó không hoạt động, sau đó tôi xem xét kỹ hơn đối tượng popover và thực tế có phương pháp destroy() hoạt động tốt. Ví dụ.:

var popover = $.data($('#popoverspan'), "bs.popover"); 
popover.destroy();