Discussion :

[Geoffrey74]

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

Code Html :

Sélectionner tout - Visualiser dans une fenêtre à part

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&amp;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&amp;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 JQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

$( "#menucentre" ).load( "game.php #menucentre > *" );

Le code fonctionne parfaitement avant de recharger la div.

[danielhagnoul]

Bonsoir

Avec le code : $( "#menucentre" ).load( "game.php #menucentre" );.

On chargera, à partir du fichier PHP, un élément du DOM ID "menucentre" dans un élément du DOM ayant le même ID (doublon ID interdit).

Je ne sais pas si le fait d'écrire -- #menucentre > * -- y change quelque chose.

Il faudrait examiner le code source généré après le "load".

[Geoffrey74]

Bonsoir,

effectivement, avec $( "#menucentre" ).load( "game.php #menucentre" ); il y a bien un doublon d'ID, cependant, j'ai trouver la parade en utilisant le code $( "#menucentre" ).load( "game.php #menucentre > *" ); (astuce trouvée ici)

Au niveau du code, tout est OK après rechargement de la div.


Comme je disais dans mon post, j'ai vu sur différent forum que le sujet est connu, et que généralement il suffit d'utiliser .on() à la place de l'event click() ou hover() directement, seulement moi ça ne fonctionne pas :-\

[Geoffrey74]

Bonjour,


j'ai fini par trouver l'astuce !

j'ai remplacer ma fonction qui capte le mouseenter et mouseleave

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$("div").on('mouseenter', '[class="tooltip"]', function() {
        var tip = $('#'+$(this).attr('name'));
			tip.fadeIn("slow");
	});
	$("div").on('mouseleave', '[class="tooltip"]', function() {
		var tip = $('#'+$(this).attr('name'));
			tip.stop();
			tip.fadeOut("slow");
	});

Maintenant tout fonctionne parfaitement


Petite question, est il possible de regrouper mes 2 events comme dans mon premier code ?
J'ai pas trouver ou lui passer le paramètre de ma class.

[danielhagnoul]

Bonsoir

Bon à savoir que cette écriture fonctionne dans la méthode load() : #menucentre > *.

Pour la méthode on(), l'écriture pour du JS dynamique est bien expliquée dans l'API, et vu votre :

j'ai donc fait des recherches à ce sujet et vu qu'il fallait passer par l'event on() ...

je pensais que c'était OK pour ce problème.

Le sélecteur "div" est trop général, votre gestionnaire d'événement concerne l'ID "menucentre" : $( "#menucentre" ).on( "mouseente", ".tooltip", function(){ ... });.

Simplifier ? Dans l'API ( http://api.jquery.com/on/ )

Example: Attach multiple event handlers simultaneously using a plain object.

ne concerne pas le code de la méthode on() pour du JS dynamique, je crois que ce n'est pas possible.

[Geoffrey74]

Ravi de vous avoir "apprit" quelque chose
Je clos le sujet, pas réussi à trouver comment faire, mais ce n'est pas très grave.

Merci pour vos réponses en tout cas