Discussion :

[flavors]

Bonjour,

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

Code :

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

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 :

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

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.

[sekaijin]

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

Code :

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

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 :

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

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 :

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

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 :

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

 // 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

[flavors]

Merci pour vos réponses.

Code :

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

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.

Le code

Code :

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

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é.

Ce code à une toute autre sigification

Code :

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

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?

'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.

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

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

Merci.

[sekaijin]

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

Code :

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

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 :

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

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 :

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

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 :

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

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

Alors que si tu écris

Code :

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

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 :

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

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 :

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

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 :

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

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

[flavors]

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 :

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

1
2
3
4
5
6
7
 
function mafonction()
{
 
}
 
mafonction();

Tandis que cela non :

Code :

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

1
2
3
4
5
6
7
 
mafonction();
 
function mafonction()
{
 
}

C'est bien cela?

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

Code :

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

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

Alors que si tu écris

Code :

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

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!

[NoSmoking]

Bonjour,

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 :

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

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

si j'écris

Code :

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

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 :

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

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 :

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

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.

[flavors]

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

Code :

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

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

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

Code :

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

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

qui est de la même forme que

Code :

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

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.