Appliquer un script à du contenu chargé dynamiquement depuis une autre page
Bonjour,
Je réalise actuellement une application de planning en PHP/mySQL et je me sert de jQuery pour rendre les pages plus dynamiques mais je débute.
Voila mon problème : ma page principale (index.php) récupère, via l'objet ajax de jQuery, le contenu d'une autre page pour l'afficher dans un <div> : en fait il s'agit du tableau du planning (ajax.afficher.php)
Je voulais faire en sorte que sur chaque case quand on passe la souris une infobulle s'affiche. J'ai donc récupérer un script dans la section des tutoriels jQuery du site (ici)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| $(document).ready(function() {
// Sélectionner tous les liens ayant l'attribut rel valant tooltip
$('a[rel=tooltip]').mouseover(function(e) {
// Récupérer la valeur de l'attribut title et l'assigner à une variable
var tip = $(this).attr('title');
// Supprimer la valeur de l'attribut title pour éviter l'infobulle native
$(this).attr('title','');
// Insérer notre infobulle avec son texte dans la page
$(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');
// Ajuster les coordonnées de l'infobulle
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
// Faire apparaitre l'infobulle avec un effet fadeIn
$('#tooltip').fadeIn('500');
$('#tooltip').fadeTo('10',0.8);
}).mousemove(function(e) {
// Ajuster la position de l'infobulle au déplacement de la souris
$('#tooltip').css('top', e.pageY + 10 );
$('#tooltip').css('left', e.pageX + 20 );
}).mouseout(function() {
// Réaffecter la valeur de l'attribut title
$(this).attr('title',$('.tipBody').html());
// Supprimer notre infobulle
$(this).children('div#tooltip').remove();
});
}); |
seulement il ne semble pas fonctionner pour le tableau qui est chargé dynamiquement par mon script.
A l'extérieur de mon <div>, en écrivant ceci :
Code:
<a rel='tooltip' title='texte infobulle'></a>
j'ai bien l'infobulle qui s'affiche comme prévu.
Mais quand je mets un tel lien dans la page ajax.afficher.php, cela ne fonctionne pas.
Je pense savoir pourquoi : le script est exécuté à la fin du chargement du DOM ($(document.ready( ... ) ) or l'affichage dans le <div> du tableau à lieu après (plusieurs mise à jour lors de l'utilisation).
Le problème c'est que ne sais pas trop comment faire pour que ce script s'applique aussi au tableau.
Est-ce que je dois mettre le code du script dans ajax.afficher.php ?
Merci d'avance.
