JeuWeb - Crée ton jeu par navigateur
[Résolu] Besoin d'éclaircissement sur le gestionnaire d'évènement jQuery - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu] Besoin d'éclaircissement sur le gestionnaire d'évènement jQuery (/showthread.php?tid=6321)

Pages : 1 2

[Résolu] Besoin d'éclaircissement sur le gestionnaire d'évènement jQuery - Damocorp - 16-08-2012

Salut,

J'ai crée le code suivant pour la gestion de mes infobulles et timer :
[pastebin]0svdsDVm[/pastebin]

Tout fonctionne à merveille. Sauf lorsque je crée l'affichage via la fonction html de Jquery par exemple.
Dans le cas ou j'afficherai quelque chose comme :

Code :
<a data-infobulle="blabla">Vol ressource</a>

via le code Jquery :

var texte = '<a data-infobulle="blabla">Vol ressource</a>';
$(id_balise).html(texte);

Firebug me donne bien le bon résultat. Les Css sont bien appliqués, mais par l'effet mouseover de Jquery.


J'ai un peu du mal à comprendre pourquoi ?
Vous pourriez m'éclairer svp ?


Merci

RE: Besoin d'éclaircissement - Sephi-Chan - 16-08-2012

Il faut que tu utilises les delegate pour que les events fonctionnent avec le code HTML injecté après l'exécution du script qui définit les listeners.

Tout ce qu'il faut savoir se trouve sur la documentation de la méthode on jQuery.

RE: Besoin d'éclaircissement - Akira777 - 16-08-2012

En gros au lieu de .mouseover() et .mouseout() :

- jQuery < 1.7 :
.live('mouseover', function() { ... })
(ou .delegate(), c'est mieux)

- jQuery > 1.7 :
.on('mouseover', function() { ... })

Pour ajouter un éclaircissement vulgarisé de la chose : les méthodes du type .mouseover(function() { ... }) ou .bind("mouseover", function() { ... }) ne fonctionnent que sur le HTML généré au chargement de la page, tel qui est reçu par le navigateur.

Tout le HTML crée à la volée en javascript (retour d'un appel AJAX, par exemple), devra être manipulé avec les méthodes dites "delegate" comme .on(), .delegate() ou .live().

(Si quelqu'un maitrise mieux le Javascript -et son vocabulaire- que moi -ce qui soit dit en passant n'est pas difficile à trouver-, qu'il me corrige si je me suis comporté en hérétique en utilisant des groupes nominaux compliqués tels que : "méthodes dites \"delegate\"", et que je ne maîtrise absolument pas u__u)

RE: Besoin d'éclaircissement - Damocorp - 16-08-2012

Bon pour moi tout cela c'est du pur chinois. Confusediffle:
Va encore me falloir quelque heures de docs pour comprendre tous ces mots dans une phrase si courte.

En attendant voici mon nouveau code :

[pastebin]1jhDawCt[/pastebin]

Qui fonctionne maintenant même sur les texte affiché par Jquery.
Merci Sephi :main:


merci aussi à Akira777 pour les détails, ce fut certainement plus simple que la phrase de sephi, même avec google sous la main Smile

RE: Besoin d'éclaircissement - Damocorp - 17-08-2012

Je viens de finir quelques tests et je pige plus rien. Même le ".on()" ne sait pas me récupérer la valeur.
Imaginons que je fasse un :

Code :
$('#id_element).attr('data-infobulle','Changement du texte');

Firebug me montre bien que la valeur de l'attribut change. Mais un :

Code :
$("div[data-infobulle]").on("click",show_infobulle);

M'affiche toujours l'infobulle générée au chargement. Bon j'vais aller dormir, on dis que la nuit porte conseil.

Edit :
J'ai trouvé une solution qui est de passé par des variables javascript.
Bien que cela fonctionne, ce problème me saoul. y'a quelque chose que je dois rater car j'ai tester .on sur une page blanche avec un test tout bête et il prend bien en compte les changements dans les attribut data. C'est donc moi qui dois avoir un problème quelque pars mais j'ai pas su trouver ou.

RE: Besoin d'éclaircissement - php_addict - 17-08-2012

(17-08-2012, 03:25 AM)Damocorp a écrit :
Code :
$("div[data-infobulle]").on("click",show_infobulle);

M'affiche toujours l'infobulle générée au chargement. Bon j'vais aller dormir, on dis que la nuit porte conseil.



Code :
$("div[data-infobulle]").on("click", function(){
alert( $("div[data-infobulle]").text() );
});

attention .on() n'est valable qu'à partir de la version 1.7 de Jquery

RE: Besoin d'éclaircissement - Sephi-Chan - 17-08-2012

Je capte pas. Qu'est-ce qui te pose problème maintenant ?

RE: Besoin d'éclaircissement - Plume - 17-08-2012

Premièrement, à 3h25, faut dormir, c'est pas une heure pour être efficient. Ça se voit également à la lecture de ton texte. Quand je t'ai lu, j'ai tout de suite regardé l'heure de publication…

Deuxièmement, fais nous voir ta fonction show_infobulle.

RE: Besoin d'éclaircissement - Sephi-Chan - 17-08-2012

Je vois que tu n'as pas lu le chapitre sur la délégation de la page de documentation que je t'ai envoyé.
Si tu préfères qu'on te donne à manger plutôt que d'apprendre à chasser, voilà un bout de code :



$("body").on("mouseover", "[data-infobulle]", show_infobulle);

Essaye de formuler clairement tes demandes en commençait parce que tu veux faire, puis ensuite nous montrer ce que tu as déjà fait. Et surtout relis ton message pour t'assurer qu'il a du sens.

RE: Besoin d'éclaircissement - Damocorp - 17-08-2012

Citation :attention .on() n'est valable qu'à partir de la version 1.7 de Jquery
J'ai la version 1.7, et je suis passé cette nuit en version 1.8
De ce côté la, ça devrait-être bon.

Citation :Je vois que tu n'as pas lu le chapitre sur la délégation de la page de documentation que je t'ai envoyé.
Si mais j'suis pas bilingue. Déjà qu'en français c'est pas toujours facile à suivre, alors en anglais Confusediffle:

Citation :Si tu préfères qu'on te donne à manger plutôt que d'apprendre à chasser, voilà un bout de code :
J'me suis pas fait chier à resté éveillé toute la nuit juste pour faire du copier coller. Pendant ces heures, je lis et je fais beaucoup de test pour comprendre.

Code :
$("body").on("mouseover", "[data-infobulle]", show_infobulle);
Bon j'ai trouvé ceci : gestionnaire d'evenement

Une petite récapitulation :

- Je souhaite stocker des informations pour mes infobulle dans l'attribut data-infobulle
- Cet attribut pourra se retrouver dans des balises comme : span, div, img ou a
- Au survol, ma fonction show_infobulle() affiche automatiquement l'infobulle si l'attribut data-infobulle est présent, et que je dois maintenant rendre actif via la méthode ".on()"


Code :
$("span,div,img,a").on("mouseover", "[data-infobulle]", show_infobulle);
Ne serait-il pas mieux adapter ?
Pourquoi utilise tu "body" comme sélecteur ?


Si j'ai compris je peux aussi changer la façon dont mon infobulle disparait :
Code :
$("div,span,a,img,th").mouseout(hide_infobulle);
est plus que suffisant non ?
Il n'est pas nécessaire d'utiliser un gestionnaire d'évènement uniquement pour supprimer une balise dont l'id est toujours le même.
Par contre, si je compte un jour manipuler les valeurs de cet id, je devrai repasser par un gestionnaire d'évènement pour que les changements soit bien pris en compte. J'ai bien suivi jusque la ?