Outils pour utilisateurs
devweb:jquery:listener (lu 8980 fois)
Différences
Ci-dessous, les différences entre deux révisions de la page.
|
devweb:jquery:listener [07-01-2016 16:21] edmc73 créée |
devweb:jquery:listener [07-01-2016 16:56] (Version actuelle) edmc73 |
||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| ====== Listener / écouteur ====== | ====== Listener / écouteur ====== | ||
| - | Pour gérer des événements tel que le clic ou le mouse over, on utilise généralement le code | + | Admettons un tableau classique comme ça avec un bouton qui par défaut est transparent |
| + | <code html> | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | <button class=" | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | On veut que lorsque la souris passe sur une ligne du tableau, on fasse apparaitre le bouton en supprimant la class transparent | ||
| + | |||
| + | On utilise généralement le code pour ajouter un écouteur sur le hover | ||
| <code javascript> | <code javascript> | ||
| $(' | $(' | ||
| - | $(this).find(' | + | $(this).find(' |
| }, | }, | ||
| - | $(this).find(' | + | $(this).find(' |
| } | } | ||
| ); | ); | ||
| </ | </ | ||
| - | Sauf que si on rajoute du code en live avec .append() par exemple, ce code ne sera pas concerné par le toggle() | + | Sauf que si on rajoute du code en live avec .append() par exemple |
| + | <code javascript> | ||
| + | $(' | ||
| + | </ | ||
| + | |||
| + | Alors l' | ||
| - | Pour éviter ce problème, il faut utiliser .on() comme ceci | + | Pour éviter ce problème, il faut utiliser .on() en prenant soin de le mettre sur l' |
| <code javascript> | <code javascript> | ||
| - | $('tr' | + | $('table' |
| mouseenter: function(){ | mouseenter: function(){ | ||
| - | $(this).find(' | + | $(this).find(' |
| }, | }, | ||
| mouseleave: function(){ | mouseleave: function(){ | ||
| - | $(this).find(' | + | $(this).find(' |
| } | } | ||
| - | }); | + | }," |
| </ | </ | ||
devweb/jquery/listener.1452180098.txt.gz · Dernière modification: 07-01-2016 16:21 de edmc73
Outils de la page
