$(this) en argument de fonction

Bonjour,

Jusqu'à présent je mettais toutes mes fonction JS au milieu de mes pages. Du coup je pouvais fair comme ça :

Code:

---

1 2 3 4

$('tbody').on( 'click', 'tr',function() { //et la je pouvais appeler $(this) pour effectuer des action sur l'élément cliqué

---

Maintenant pour aérer mon code et gagner en lisibilité, je souhaiterais donc mettre mes fonction js dans un fichier à part.
C'est là que je ne vois pas trop comment procéder pour récupérer l'élément $(this) sur lequel j'ai cliqué, j'aurai fait comme ça, mais ça ne marche pas.

Code:

---

1 2 3 4 5 6 7

$('tbody').on( 'click', 'tr', mafonction($(this)))   function mafonction($element) // Dans un cas comme ça, on met un $ devant element comme il vient de $(this) lui même issue de JQuerry? { //... }

---

Si jamais quelqu'un sait comment récupérer l'élément cliqué en argument de fonction, je suis preneur!

Merci.

Salut
tu pets ton code tel qu'il était avant dans un fichier sans changement et tu place le contenu entre

Code:

---

1 2 3

$(document).ready( //ton code ici );

---

et tu charge le fichier dans le head de ta page

PS: merci d'utiliser le forum JQuery pour les question JQuery

Le code

Code:

---

1 2 3 4

$('tbody').on( 'click', 'tr',function() { //et la je pouvais appeler $(this) pour effectuer des action sur l'élément cliqué

---

signifie
Rechercher tous les élément de type 'tbody' pour chaque élément trouvés associer à l'événement 'click' sur tous les fils 'tr' la fonction annonyme

Ce code à une toute autre sigification

Code:

---

1 2 3 4 5 6 7

$('tbody').on( 'click', 'tr', mafonction($(this)))   function mafonction($element) // Dans un cas comme ça, on met un $ devant element comme il vient de $(this) lui même issue de JQuerry? { //... }

---

il signifie
Rechercher tous les élément de type 'tbody' pour chaque élément trouvés associer à l'événement 'click' sur tous les fils 'tr' le résultat de l'exécution de 'mafonction' avec pour paramètre le résultat de la rechercher de l'objet 'this'.
'mafonction' est donc exécuter au moment où on veut associer quelque chose à l'événement click

un simple passage en debug t'aurait montré que tu faisait fausse route.

Code:

---

// Dans un cas comme ça, on met un $ devant element comme il vient de $(this) lui même issue de JQuerry?

---

le $ ne set à rien

A+JYT

Merci pour vos réponses.

Citation:

---

Envoyé par sekaijin

Code:

---

1 2 3

$(document).ready( //ton code ici );

---

et tu charge le fichier dans le head de ta page

---

Je ne savais pas que l'on pouvait appeler une fonction à l’évènement "$(document).ready();" quand lui même se trouve dans le fichier js.
Je pensais qu'il fallait juste mettre sa fonction dans le fichier js et depuis la page faire $(document).ready(mafonction());.
C'est super!

Pour la suite je pense que j'ai compris le principe mais certains points ne sont pas clairs.

Citation:

---

Envoyé par sekaijin

Le code

Code:

---

1 2 3 4

$('tbody').on( 'click', 'tr',function() { //et la je pouvais appeler $(this) pour effectuer des action sur l'élément cliqué

---

signifie
Rechercher tous les élément de type 'tbody' pour chaque élément trouvés associer à l'événement 'click' sur tous les fils 'tr' la fonction annonyme

---

J'avais mal compris je pensais que c'était : "Lors d'un clic sur 'tbody', sur le 'tr' cliqué, effectuer la fonction.
Quand j'effectuais ce code mon élément 'this' était bien le 'tr' sur lequel j'avais cliqué.

Citation:

---

Envoyé par sekaijin

Ce code à une toute autre sigification

Code:

---

1 2 3 4 5 6 7

$('tbody').on( 'click', 'tr', mafonction($(this)))   function mafonction($element) // Dans un cas comme ça, on met un $ devant element comme il vient de $(this) lui même issue de JQuerry? { //... }

---

il signifie
Rechercher tous les élément de type 'tbody' pour chaque élément trouvés associer à l'événement 'click' sur tous les fils 'tr' le résultat de l'exécution de 'mafonction' avec pour paramètre le résultat de la rechercher de l'objet 'this'.

---

Ca veut dire que j'applique sur les 'tr' cliqués le résultat de ma fonction?
Je suis désolé mais je ne comprends pas très bien. Pourquoi cela fonctionne-t-il lorsque j'utilise function{} que je déclare directement et pas quand j'utilise une fonction déjà déclarée?

Citation:

---

Envoyé par sekaijin

'mafonction' est donc exécuter au moment où on veut associer quelque chose à l'événement click

---

C'est justement ce que je veux faire? Exécuter ma fonction lorsque j'effectue un clic.

Citation:

---

Envoyé par sekaijin

un simple passage en debug t'aurait montré que tu faisait fausse route.

---

C'est vrai je n'ai pas encore ce reflex.

Merci.

Tu peux très bien utiliser une fonction nommée

Code:

---

1 2 3 4

$('tbody').on( 'click', 'tr',function() { //et la je pouvais appeler $(this) pour effectuer des action sur l'élément cliqué });

---

Code:

---

1 2 3 4 5 6

function mafunction() { //et la je pouvais appeler $(this) pour effectuer des action sur l'élément cliqué }   $('tbody').on( 'click', 'tr',mafunction);

---

Quant à la compréhension de la syntaxe c'est pour moi un des principaux reproche que je fais à JQuery.

Si tu écris

Code:

---

1 2	monElement.onclick=function() { };

---

tu vois clairement que tu affecte au membre onclick de monElement la fonction
de même si tu fais

Code:

---

1 2 3

function maFunction () { }; monElement.onclick=maFonction;

---

Alors que si tu écris

Code:

---

1 2 3

function maFunction () { }; monElement.onclick=maFonction();

---

tu vois vite que tu affectes au membre onclick de monElement le résultat de l'exécution de maFunction.


Je trouve que la syntaxe de JQuery masque cette affectation alors qu'il ne s'agit que d'une affectation

Code:

---

1 2	monElement.onclick=function() { };

---

tu vois clairement que tu affecte au membre onclick de monElement la fonction
La même affectation en JQuery

Code:

---

1 2 3 4

function maFunction () { }; $(monElement).on('click', maFonction); //ici ce que fait JQuery sans le monter c'est monElement.onclick=maFonction;

---

Une des difficulté de la programmation événementielle est de comprendre quand s'exécute le code.

Code:

---

1 2 3 4 5 6 7 8

//lorsque le moteur JS arrive sur cette ligne il défini la fonction maFunction mais ne l'exécute pas function maFunction () { //ce code sera appelé lorsque maFonction sera appelé }; //lorsque le moteur JS arrive sur cette ligne il affecte à l'événement onclick de monElement la fonction // mais il ne l'exécute pas monElement.onclick=maFonction; //le code de maFonction sera donc exécuter à chaque fois que l'utilisateur va cliquer sur monElément

---

A+JYT

D'accord je pense avoir compris.
Il faut d'abord définir la fonction avant de l'utiliser (je veux dire sur la page) contrairement a d'autres langages où on peut faire l'inverse?
Ceci fonctionnerait :

Code:

---

1 2 3 4 5 6 7

function mafonction() {   }   mafonction();

---

Tandis que cela non :

Code:

---

1 2 3 4 5 6 7

mafonction();   function mafonction() {   }

---

C'est bien cela?

Citation:

---

Envoyé par sekaijin

[/CODE] tu vois clairement que tu affecte au membre onclick de monElement la fonction
de même si tu fais

Code:

---

1 2 3

function maFunction () { }; monElement.onclick=maFonction;

---

Alors que si tu écris

Code:

---

1 2 3

function maFunction () { }; monElement.onclick=maFonction();

---

tu vois vite que tu affectes au membre onclick de monElement le résultat de l'exécution de maFunction.

---

Je ne savais pas que le fait d'appeler une fonction "mafonction" servait à exécuter la fonction uniquement et que "mafonction()" à récuperer le résultat.
Je pensais qu'il n'y avait qu'une seule syntaxe "mafonction()".

Merci beaucoup pour vos explications!

Bonjour,

Citation:

---

Je ne savais pas que le fait d'appeler une fonction "mafonction" servait à exécuter la fonction uniquement et que "mafonction()" à récuperer le résultat.

---

ce n'est pas exactement ce que t'a indiqué sekaijin.

A partir de

Code:

---

1 2 3

function nom_de_la_fonction(){ return 'valeur en de retour de la fonction'; }

---

si j'écris

Code:

---

1 2	var resultat = nom_de_la_fonction(); alert( resultat); // affichage de "valeur en de retour de la fonction"

---

il y a exécution de la fonction nom_de_la_fonction et affectation, du résultat de la fonction, dans la variable resultat

Si maintenant on écrit

Code:

---

1 2	var resultat = nom_de_la_fonction; alert( resultat); // affichage de "function nom_de_la_fonction(){ return 'nom_de_la_fonction';}"

---

la fonction nom_de_la_fonction n'est pas exécutée mais la variable resultat pointe sur la fonction ainsi si l'on fait

Code:

---

1 2 3

var resultat = nom_de_la_fonction; // affectation var temp = resultat(); // exécution, même chose que nom_de_la_fonction() alert( temp); // affichage de "valeur en de retour de la fonction"

---

en espérant que cela soit un peu plus clair pour toi.

Ah Ok!
Merci pour votre réponse, tout est beaucoup plus clair maintenant.
Donc en fait quand sekaijin ecrivait

Code:

---

1 2	$('tbody').on( 'click', 'tr',mafunction);

---

c'est par ce que c'est équivalent à

Code:

---

1 2 3 4

$('tbody').on( 'click', 'tr',mafunction(){ //mon code });

---

qui est de la même forme que

Code:

---

1 2 3 4

$('tbody').on( 'click', 'tr',function(){ //mon code });

---

Ce qui me permet donc de déclarer ma fonction avant et de l'appeler lors de l'evenement click?
A moins que je sois encore à côté de la plaque><.

Merci encore pour votre aide.