javascript - content - popover css codepen

Bootstrap popover destroy & recreate funciona solo cada dos veces

Question

Quiero destruir y recrear programáticamente una ventana emergente específica de Bootstrap. Entonces lo que hago es:

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

Y funciona cada segunda vez solamente. Pensé que es la cuestión del tiempo que lleva destruir la ventana emergente, pero incluso agregar un retraso entre las dos líneas no ayuda. He recreado el problema en JSFiddle: http://jsfiddle.net/Lfp9ssd0/10/

¿Por qué es así? Se ha sugerido que funciona, por ejemplo, en Twitter Bootstrap Popover con contenido generado dinámicamente a través de ajax y Bootstrap Popover Reinicialización (para actualizar el contenido)

Funciona bien cuando omito la destrucción, pero no estoy seguro de qué sucede cuando creo otra ventana emergente para un elemento sin destruir la ya existente. ¿Se reinicializa o crea una nueva ventana emergente con la pérdida del acceso a la antigua?

Answer 1

La respuesta de @Deniz es excelente, pero si desea cambiar el título / contenido después de que se haya mostrado la ventana emergente y se encuentre en versiones anteriores de Bootstrap (la mía es 3.3.1), debe usar $(''.your_popover_target'').data(''popover'').options.content = "new text" lugar de .data(''bs.popover'') , seguido de $(''.your_popover_target'').popover(''show'') ;

Answer 2

Lo resolví yo mismo. Aparentemente .popover(''destroy'') es asíncrono, y la creación inmediata de otra ventana emergente falla, mientras que la anterior se está destruyendo. Intenté agregar demora mediante el uso de alert , que falló por alguna razón. El uso de setTimeout() antes de crear una nueva setTimeout() no es la solución más elegante sino que funciona:

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

200 ms parece suficiente, pero puede necesitar un ajuste fino en otros casos.

Answer 3

Probé el método setTimeout y, por alguna razón, no funcionó, luego eché un vistazo más profundo al objeto popover y, de hecho, existe un método destroy() que funcionó bien. P.ej:

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

Answer 4

Tuve el mismo problema que se describe aquí. Después de una extensa búsqueda, encontré una forma de cambiar los contenidos de la ventana emergente sin tener que destruirlo primero. Simplemente inicialice la ventana emergente sin la opción de contenido especificada.

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

Tenga en cuenta que la inicialización de popover anterior no especifica el contenido. La ventana emergente no se puede mostrar todavía, no tiene contenido. Ahora especifique la condición que luego conduce a diferentes tipos de textos mostrados en la ventana emergente.

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

Ahora estamos listos para mostrar el popover.

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

Esto me funcionó a partir de Bootstrap 3.0. Por supuesto, cuando esté listo, siempre puede destruir u ocultar su ventana emergente como de costumbre cuando ocurre el evento apropiado en su página.

Actualización: si solo necesita cambiar el texto en la ventana emergente después de que ya se muestra la ventana emergente, puede usar la misma técnica. 1) Obtenga una retención del DOM que se agrega a la ventana emergente, luego cambie el contenido y 2) muestre nuevamente la ventana emergente. Ejemplo a continuación:

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

Answer 5

ajuste ''animation'': false arreglé para mí