onclick sur td se déclenche deux fois

Version imprimable

bonjour,

voila un bout de code tout simple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id="test" onclick="$('#txtid').val($('#txtid').val() + 'test/');"> <table> <tr class="montr"> <td class="montd" id="tdid" onclick="$('#txtid').val($('#txtid').val() + 'toto/');">toto</td> </tr> <tr> <td>titi</td> </tr> <tr> <td>tutu</td> </tr> </table> </div> <input id="txtid" />
Si je passe le script $("#tdid").click(), le résultat sera dans mon input toto/test/test/.

Le onclick de la DIV se déclenche 2 fois, pourquoi ?

j'utilise la version 1.9.0 de jquery. J'ai essayé avec une 1.6.0, c'est le même effet.

Merci d'avance

Je n'irais pas jusqu'à dire que c'est un bug de jQuery, mais c'est bizarre.

En tout cas j'ai testé avec du code JS pur (voir MouseEvent) et le problème ne se produit pas.

Code:

1
2
3
4
5
6
var click = new MouseEvent("click", {
  canBubble: true,
  cancelable: true,
  view: window,
});
document.getElementById("tdid").dispatchEvent(click);

Et ça ne se produit pas avec jQuery quand tu remplaces les attributs onclick par des $("...").click(...).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang=fr>
<head>
  <meta charset=utf-8>
  <title>Bouillonnement bizarre avec jQuery</title>
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script> 'use strict';
  
  $(document).ready(function() {
  
    $("#test").click(function() {
      $('#txtid').val($('#txtid').val() + 'test/');
    });
    
    $("#tdid").click(function() {
      $('#txtid').val($('#txtid').val() + 'toto/');
    });
    
  });
  
  </script>
</head>
<body>
 
<!-- <div id="test" onclick="$('#txtid').val($('#txtid').val() + 'test/');"> -->
<div id="test">
    <table>
        <tr class="montr">
            <!-- <td class="montd" id="tdid" onclick="$('#txtid').val($('#txtid').val() + 'toto/');">toto</td> -->
            <td class="montd" id="tdid">toto</td>
        </tr>
        <tr>
            <td>titi</td>
        </tr>
        <tr>
            <td>tutu</td>
        </tr>
    </table>
</div>
<input id="txtid" />
 
</body>
</html>

04/11/2014, 09h18
freddou17

Slt,
je pense que l'evt onclick est intercepté sur ta div vu que ta div englobe ton table (regarde du coté de la propagation des evts en js)...
A quoi sert le onclick de ta div??

++

Code:

1
2
3
4
$( "td" ).click(function( e ) {
e.stopPropagation();
 
});

04/11/2014, 10h25
Dark Ryus

Justement je veux que les 2 événements se déclenchent, pas seulement le TD.

Mon problème c'est que le onclick de la DIV se déclenche 2 fois au lieux d'une seule.

Je ne peux pas utiliser le ready() avec l'événement click() dans le bout de code sur lequel je travail.

J'ai posté aussi sur le forum de JQuery en espérant avoir une explication.

Je vais continuer à réfléchir à une autre solution et je vais étudier vos propositions.
04/11/2014, 11h40
SpaceFrog

je n'ai a priori pas de double click sur le div ...
http://jsfiddle.net/fh67605y/
ton souci doit provenir d'un autre bout de code ?
04/11/2014, 12h02
Dark Ryus

je suis d'accord avec ton bout de code présent sur ton lien, en passant par un "on" sur les event click, on n'a pas de problème.

Je n'ai le problème que dans le cas précis de mon exemple, on mettant le "onclick" sur les éléments et en appelant $("#tdid").click() avec la console (je n'utilise pas la souris pour cliquer sur le td, je le déclenche par le code).

Cela ne vient pas d'un autre bout de code car j'ai testé sur une page vierge, sans autres bout de code.

"Watilin" sur le 2ème POST constate le même problème que moi.
04/11/2014, 12h50
SpaceFrog

Citation:

je le déclenche par le code

Pas dans le code que tu nous montres en tout cas ...
04/11/2014, 14h38
Dark Ryus

oui dans mon exemple je passe par la console, ce qui donne le même résultat.

je continue de chercher une autre solution que de passer par une fonction() comme dans vos réponses car le code déjà existant dans mon site est déjà très lourd et j'aimerai éviter de tout refaire.
04/11/2014, 14h59
Bovino

Pourquoi tu n'utilises pas une balise <script> tout simplement ?
C'est sûr qu'au milieu du HTML, c'est pas le plus propre, mais si t'as pas le choix, ça fonctionne quand même.
04/11/2014, 15h20
Dark Ryus

Pour éviter de tout casser, j'ai externaliser le onclick de la DIV comme dans vos exemples et j'ai gardé le onclick sur mon TD.

Cela fonctionne.

Merci pour votre aide.

NB: Je ne comprend toujours pas pourquoi l'onclick sur la div était déclenché 2 fois, bug ?
04/11/2014, 18h04
Watilin

Citation:

Envoyé par Dark Ryus

Je ne peux pas utiliser le ready() avec l'événement click() dans le bout de code sur lequel je travail.

Pour quelle raison tu ne peux pas ? Que tu n'aies pas accès au code serveur, d'accord, mais sur la partie client tu devrais au moins avoir le droit de modifier une page entière. Dis à ton patron / chef de projet / client qu'il doit t'accorder plus de confiance ;)

Citation:

Envoyé par Dark Ryus

je continue de chercher une autre solution que de passer par une fonction() comme dans vos réponses car le code déjà existant dans mon site est déjà très lourd et j'aimerai éviter de tout refaire.

En faisant comme on t'a montré, le code ne sera peut-être pas plus léger, mais il sera plus clair : pas de mélange de codes, pas de problèmes de coloration syntaxique et pas de problèmes de guillemets ; et surtout il sera centralisé, ce qui rendra son évolution beaucoup plus facile. Crois-moi, le plus tôt sera le mieux.
13/03/2018, 23h15
lenahic

Double balise <script></script>

Hello !!

Je rencontrais la même erreur, jusqu'à ce que je me rende compte qu'en fait, j'appelais deux fois mon fichier javascript dans le html et que c'est ça qui me faisait tourner toutes mes fonctions javascript deux fois ...

Bon courage à tous,

Lenahic