Fonctionnement jQuery sur div dynamique
Bonjour,
je bloque depuis un moment sur le fonctionnement de jquery sur une div chargée dynamiquement.
J'ai donc fait des recherches à ce sujet et vu qu'il fallait passer par l'event on() à la place de click() ou hover() par exemple.
J'ai donc modifier mon script mais rien à faire, cela ne marche pas.
Peut être ai-je fais une boulette ? en tout cas je sèche ...
Voici donc mon code pour vous permettre de ma guider sur la voie :D
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
40
41
42
43
44
45
46
47
| <div id="menucentre">
<div id="haloattaque"> <img src="./styles/theme/V2/menucentre/haloattaque.png" /></div>
<div id="marchant" class="tooltip" title="tooltipmarchant">
<a href="#" id="mercado" class="url"><img src="./styles/theme/V2/menucentre/marchand.png" /></a>
<div id="tooltipmarchant" class="tooltipcontent tooltip_marchant">
<a href="#" id="mercado" class="url">Appelez un marchant</a>
</div>
</div>
<div id="sanctuaire" class="tooltip" title="tooltipoficiales">
<a href="#" id="oficiales" class="url"><img src="./styles/theme/V2/menucentre/sanctuaire.png" /></a>
<div id="tooltipoficiales" class="tooltipcontent tooltip_sanctuaire">
<a href="#" id="options" class="url">Invoquez une créature !</a>
</div>
</div>
<div id="avatar" class="tooltip" title="tooltipavatar">
<a href="#" id="options" class="url"><img src="./styles/theme/V2/menucentre/avatar.png" /></a>
<div id="tooltipavatar" class="tooltipcontent tooltip_avatar">
<a href="#" id="options" class="url">Personnalisez votre jeu !</a>
</div>
</div>
<div id="messagerie" class="tooltip" title="tooltipmessagerie">
<a href="#" id="messages" class="url"><img src="./styles/theme/V2/menucentre/messagerie.png" class="img_messagerie" /></a>
<div id="tooltipmessagerie" class="tooltipcontent tooltip_messagerie">
<a href="#" id="messages" class="url">Visualiser vos messages</a>
</div>
</div>
<div id="alerte" class="tooltip" title="alerteattaque">
<a href="game.php?page=overview&cp=123"><img src="./styles/theme/V2/menucentre/alerte.png" class="alerte_img" /></a>
<div id="alerteattaque" class="tooltipcontent tooltip_alerte">
<a href="game.php?page=overview&cp=123">Attaque en cours sur Cosmic [1:1:1]</a>
</div>
</div>
<div id="galaxie" class="tooltip" title="tooltipgalaxie">
<a href="#" id="galaxy" class="url"><img src="./styles/theme/V2/menucentre/galaxie.png" /></a>
<div id="tooltipgalaxie" class="tooltipcontent tooltip_galaxie">
<a href="#" id="galaxy" class="url">Visualiser la galaxie</a>
</div>
</div>
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| $( function () {
$(".tooltip").on({
mouseenter: function () {
var tip = $('#'+$(this).attr('title'));
tip.fadeIn("slow");
},
mouseleave: function () {
var tip = $('#'+$(this).attr('title'));
tip.stop();
tip.fadeOut("slow");
}
}); |
Donc, le fonctionnement :
J'ai une image, est dès qu'on passe la souris dessus, un petit encart apparait avec un texte.
Ma div est recharger avec cette ligne :
Code:
$( "#menucentre" ).load( "game.php #menucentre > *" );
Le code fonctionne parfaitement avant de recharger la div.
