2012-08-14 24 views
20

Nuevo para publicar en stackoverflow aquí, así que mis disculpas por adelantado si estropeé algo aquí.Twitter Bootstrap Popovers no funciona para contenido generado dinámicamente

Estoy usando Twitter Bootstrap's popovers. 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 agrego manualmente este directamente 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 para mis elementos generados dinámicamente para tener panecillos. Utilizo un XMLHttpRequest para enviar una solicitud a un archivo PHP, y luego tomo el texto de respuesta y lo visualizo. Al agregar 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>"; 

... sin duda lo suficiente, las palabras "vuelo estacionario para popover" parecen - 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'}); 
}); 

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

ACTUALIZACIÓN:

arreglado! 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ó!

+1

How are you agregando el HTML devuelto por la llamada AJAX al DOM? –

+0

Pregunta similar; http://stackoverflow.com/questions/16990573/how-to-bind-bootstrap-popover-on-dynamic-elements –

Respuesta

17

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

ACTUALIZACIÓN

Si está utilizando 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 un retén todo para jQuery Ajax pide

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

Tiene que estar usando jQuery, ¿verdad? –

+1

Sí, pero creo que se asumió porque él llama '$ (" [rel = popover] ").popover ({placement: 'left'}); ' – nickaknudson

+0

¡Funcionó! Tenías razón, se llamaba a mi función antes de que los elementos generados estuvieran en el DOM. Muchas gracias por la ayuda, también me enseñó en el proceso. Ahora funciona sin problemas. ¡Te votaría si pudiera! xD – ryzh

2

En la función éxito del Ajax lo que necesita llama al popover. Algo como esto

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

¡Gracias! Sí, me di cuenta de que mi función estaba siendo llamada antes de que los elementos generados estuvieran en el DOM. Muchas gracias por la ayuda, ¡también me enseñó en el proceso! – ryzh

+0

De nada ... – Nick

0

esta función funcionará correctamente en el selector tiene que especificar la ubicación en la página donde se tiene que buscar "rel = popover" como pongo *

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