18034 sujets

Questions générales et questions de débutants

[Résolu] Plusieurs events sur un click en jquery ?

Bonjour,

J'ai une liste de la forme 
<ul id="fbfriends">
<li><img src="matthieu.jpg" >Matthieu</li>
<li><img src="robert.jpg">Robert</li>
<li><img src="didier.jpg">Didier</li>
<li><img src="caroline.jpg">Caroline</li>
</ul>


Je veux déclencher une action si on clique sur un élément de la liste.
$("#fbfriends li").on("mousedown",function() {
        mafonction();
        $("#fbfriends li").on("mousedown",{});
});


Dans la pratique, quand je clique sur un item, j'observe que ma méthode mafonction() est appelée 3 fois...

Je me disais que plusieurs événement étaient déclenchés (mousedown, mouseup), donc j'avais changé l'appel au on() en fournissant une fonction vide.

Est-ce la bonne manière de procéder ? Pourquoi ai-je plusieurs événements lancés ? J'ai testé sous Firefox 40.0.3 (Windows 7).
Modifié par montardon (01 Sep 2015 - 21:20)
Salut Montardon,
... parce que ton premier mousedown contient un autre mousedown : ainsi s'opère une 'mise en abîme' (au demeurant intéressante lorsque l'on souhaite créer une aberration ...).

De plus et logiquement, ce ne serait pas sur le <ul> qu'il faudrait cliquer mais sur chacun des <li> séparément, c-a-d en leur attribuant préalablement un id propre.

Non ?
Modifié par pictural (01 Sep 2015 - 19:19)
Bonjour,

Sans tester... un $(this) peut-être ?
$("#fbfriends li").on("mousedown",function() {
        mafonction();
        $(this).on("mousedown",{});
});


Je vous laisse regarder la spes sur ce point.
Un click sur le 1er item --> 4 events
Un click sur le 2ème item --> 3 events
Un click sur le 3ème item --> 2 events
Un click sur le 4eme item --> 1 event

Bizarre...
Salut,
est-ce que ton événement est lié à l'élément sur lequel tu cliques ?
Si oui, il faut que tu utilises $(this) (comme le suggère Olivier) qui est l'élément en question, déclenchant l'événement.
Il faudrait donc que tu passes en argument de ta fonction ton élément en question.
En passant, il te manque un guillemet fermant après 'robert.jpg'.

Mais je ne comprends pas exactement ce que tu veux faire : quand tu cliques sur un élément de la liste tu veux exécuter mafonction(), c'est ça ? Si c'est ça, je ferais plutôt comme ça :
$("#fbfriends").on("click", "li", function(){
  mafonction($(this));
} );
function mafonction(elem){
  console.log(elem.find('img').attr('src'));
}

Modifié par MatthieuR (01 Sep 2015 - 21:07)
C'était le bon forum pour poster.

J'ai effectué plusieurs appels à 
$("#fbfriends").on("mousedown","li",function() {
        mafonction();
        //$("#fbfriends li").on("mousedown",{});
});


Ceci a eu pour effet de m'enregistrer plusieurs fois mafonction() sur l'événement click.

Je pensais que le listener était remplacé et pas ajouté. Erreur de ma part !

Merci beaucoup pour votre aide. Smiley biggrin
Ben ! ça me fait bien plaisir de savoir que cela te fait bien plaisir d'appendre que je t'avais apporté tout de suite la bonne réponse :

-"Salut Montardon,
... parce que ton premier mousedown contient un autre mousedown : ainsi s'opère une 'mise en abîme' (au demeurant intéressante lorsque l'on souhaite créer une aberration ...). (...)".
Modérateur
Bonjour les gens,

pictural a écrit :
je t'avais apporté tout de suite la bonne réponse

Nop... l'imbrication des 2 event mousedown n'y est pour rien dans la multiple exécution de mafonction();
Le second mousedown : $("#fbfriends li").on("mousedown",{}); ne déclenchait rien du tout comme action (accolades vide qui devaient d’ailleurs déclencher une erreur Js vu qu'il manquait le function() devant).

Comme montardon l'a dit c'est parce qu'il avait appelé plusieurs fois le bloc :
$("#fbfriends").on("mousedown","li",function() {
        mafonction();
        //$("#fbfriends li").on("mousedown",{});
});

en entier (ça arrive quand on positionnent ça par erreur dans une boucle), donc il y avait plusieurs fois l’exécution de :
function() {
        mafonction();
        //$("#fbfriends li").on("mousedown",{});
}

lors d'un seul click.

Bonne journée tout le monde
Ben ! c'est exactement ce que j'avais relaté ... en français. Maintenant si un peu de littérature vous agaçait, je ne pourrais rien pour vous.
Modifié par pictural (02 Sep 2015 - 13:37)
Modérateur
pictural a écrit :
Ben ! c'est exactement ce que j'avais relaté ..

Bah non Smiley sweatdrop Ne monte pas de suite sur tes grands chevaux, on est là pour discuter calmement de soucis techniques...

Il y a un différence entre ce que tu pointais (l'imbrication de mousedown) :
$("#fbfriends").on("mousedown","li",function() {
        mafonction();
        $("#fbfriends li").on("mousedown",{});
});

et ce qui était fait (plusieurs appels au bloc entier) :
$("#fbfriends").on("mousedown","li",function() {
        mafonction();
        $("#fbfriends li").on("mousedown",{});
});
$("#fbfriends").on("mousedown","li",function() {
        mafonction();
        $("#fbfriends li").on("mousedown",{});
});
$("#fbfriends").on("mousedown","li",function() {
        mafonction();
        $("#fbfriends li").on("mousedown",{});
});

Et même si la ligne
$("#fbfriends li").on("mousedown",{});

était une aberration elle n'avait rien à voir avec la multiple exécution de mafonction();
Tu peux vérifier que dans un cas le code et exécuté 3 fois mais pas dans le premier
https://jsfiddle.net/jkw7kwkf/
Sujet clos
Aller à