web-dev-qa-db-fra.com

Les Popovers Bootstrap de Twitter ne fonctionnent pas pour le contenu généré dynamiquement

Nouveau pour poster sur stackoverflow ici, alors, excusez-moi d’avance si je me suis plaint de rien.

J'utilise les popovers de Twitter Bootstrap. Mes popovers semblent fonctionner pour les éléments que je tape manuellement dans mon document HTML, mais PAS pour les éléments que je génère dynamiquement via Javascript/Ajax.

Par exemple, le popover semble fonctionner si je l’ajoute manuellement directement à mon document 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>

Mais ce dont j'ai vraiment besoin, c'est que mes éléments générés dynamiquement aient des popovers. J'utilise XMLHttpRequest pour envoyer une demande à un fichier PHP, puis saisis le responseText et l'affiche. Lorsque j'ajoute cette ligne de code à mon fichier PHP susmentionné:

 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>";

... sûrement, les mots "survoler pour popover" apparaissent - mais le popover lui-même ne fonctionne pas!

Cela me rend fou depuis quelque temps et ce serait incroyable si quelqu'un pouvait me prêter main-forte! J'ai également ajouté la fonction JQuery que j'utilise pour activer les popovers ci-dessous de Bootstrap, pour ce que cela vaut.

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

J'ai fait une recherche approfondie de problèmes similaires et le mieux que j'ai pu trouver était ce lien . Mais ce lien ne semble pas non plus avoir de solution. Merci d'avance encore!

UPDATE:

Fixé! Un grand merci à tous ceux qui ont aidé. Mon problème était que la fonction était appelée AVANT que les éléments aient été ajoutés dans le modèle objet de document. Il y a plusieurs solutions possibles - j'ai simplement testé la solution en déplaçant la fonction popover vers la fin de la fonction Ajax et cela a fonctionné!

javascriptjqueryajaxtwitter-bootstrappopover
20
ryzh

Vous devez appeler $("[rel=popover]").popover({placement:'left'}); APRÈS que les éléments soient dans le DOM.

METTRE &AGRAVE; JOUR

Si vous utilisez 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'});
  });

OUun catch all pour les requêtes jQuery ajax

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

Dans la fonction de réussite de l'ajax, vous devez appeler le popover. Quelque chose comme ça

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

Cette fonction fonctionnera correctement dans le sélecteur. Vous devez spécifier l'emplacement sur la page où vous devez rechercher "rel = popover" comme je le faisais *. 

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