Plugin de popover de Bootstrap: no muestra el contenido HTML correctamente.
El complemento de popover de Bootstrap no muestra correctamente el contenido HTML.
Tengo un botón dentro del popover y cuando hago clic en ese botón, necesito realizar alguna acción. Cuando agrego la función onclick en el botón, el botón desaparece del popover.
Además, el botón y el popover se generan al azar, por lo que no puedo usar el onclick de jQuery.
¿Alguien puede ayudarme a entender por qué el botón no se muestra si agrego una función onclick en el popover de Bootstrap?
$('.popover-menu').popover({
'html': true,
'placement': 'top',
'trigger': 'manual',
'animation': false,
'container': 'body',
'template': '<div class="popover popover-menu-wrapper"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"></div></div></div>',
'content': function () {
var content = $(this).attr('id');
return $("#" + content + "Popover").html();
}
});
davy.ai
Posible solución:
El problema puede estar relacionado con cómo se genera e inserta el contenido de la ventana emergente dentro del DOM.
Una posible solución es utilizar la delegación de eventos para manejar el evento de clic del botón, en lugar de adjuntar directamente la función onclick al botón.
Por ejemplo, puedes agregar una clase al botón, como “popover-action”, y luego usar jQuery para escuchar el evento “click” en cualquier elemento con esa clase, de la siguiente manera:
De esta manera, incluso si el botón se elimina y vuelve a agregarse a la ventana emergente, el escuchador de eventos seguirá activo y podrá manejar el evento de clic.
Alternativamente, puedes utilizar el método “on” de jQuery para adjuntar el controlador de eventos a la propia ventana emergente y luego filtrar el elemento objetivo en función de su clase u otros atributos. Por ejemplo:
Este enfoque es más eficiente, ya que solo adjunta el escuchador de eventos una vez y delega su manejo al elemento de la ventana emergente, pero requiere un poco más de código para filtrar correctamente el elemento objetivo.
En cualquier caso, asegúrate de que el evento de clic no esté siendo detenido o prevenido por otro código o complementos, y que el botón esté realmente visible y accesible en la ventana emergente. Puedes utilizar las herramientas de desarrollo del navegador para inspeccionar el HTML y CSS de la ventana emergente y el botón, y solucionar cualquier problema con la consola de JavaScript.