javascript - container - popovers bootstrap 4

Poderes de Bootstrap de Twitter que no funcionan para contenido generado dinámicamente

Question

Nuevo en publicar en stackoverflow aquí, así que mis disculpas por adelantado si estropeé algo aquí.

Estoy usando popovers de Twitter Bootstrap. Parece que mis elementos emergentes funcionan para los elementos que escribo manualmente en mi documento HTML, pero NO los elementos que genero dinámicamente a través de Javascript / Ajax.

Por ejemplo, el popover parece funcionar si lo agrego manualmente a mi documento HTML:

<p rel=popover data-content=''It is so simple to create a tooltop for my website!'' data-original-title=''Twitter Bootstrap Popover''>hover for popover</p>

Pero lo que realmente necesito es que mis elementos generados dinámicamente tengan popovers. Utilizo un XMLHttpRequest para enviar una solicitud a un archivo PHP, y luego tomo el texto de respuesta y lo visualizo. Cuando agrego esta línea de código a mi archivo PHP antes mencionado:

 echo "<p rel=popover data-content=''It is so simple to create a tooltop for my website!'' data-original-title=''Twitter Bootstrap Popover''>hover for popover</p>";

... seguramente, aparecen las palabras "flotar para popover", ¡pero el popover en sí no funciona!

¡Esto me ha estado volviendo loco durante algún tiempo y sería increíble que alguien me pudiera echar una mano! También agregué la función JQuery que estoy usando para habilitar los popovers de Bootstrap a continuación, por lo que eso vale.

$(function (){
$("[rel=popover]").popover({placement:''left''});
});

Hice una búsqueda exhaustiva de problemas similares y lo mejor que pude encontrar fue este enlace . Pero ese enlace tampoco parece tener ninguna solución. Gracias de antemano otra vez!

ACTUALIZAR:

¡Fijo! Muchas gracias a todos los que ayudaron. Mi problema era que la función se llamaba ANTES de que los elementos se agregaran al Modelo de objetos del documento. Hay varias soluciones posibles: simplemente probé la solución cambiando la función de popover al FIN de la función Ajax y ¡funcionó!

Answer 1

Debe llamar a $("[rel=popover]").popover({placement:''left''}); DESPUÉS de que los elementos estén en el DOM.

ACTUALIZAR

Si está usando jQuery

$(element_selector)
// load results into HTML of element_selector
.load(''your/php/file'')
// when done, initialize popovers
.done(function(){
$("[rel=popover]").popover({placement:''left''});
});

O una captura de todas las solicitudes jQuery ajax

$.ajaxComplete(function(){
$("[rel=popover]").popover({placement:''left''});
});

Answer 2

En la función de éxito del ajax necesitas llamar al popover. Algo como esto

success:function(){
$("[rel=popover]").popover({placement:''left''});
}

Answer 3

Esta función funcionará correctamente en el selector que debe especificar la ubicación en la página donde debe buscar "rel = popover" como puse *

$(function ()
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});