onclick sur td se déclenche deux fois

**Dark Ryus** · 03/11/2014, 16h08

bonjour,

voila un bout de code tout simple :

Code html :

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

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

**Watilin** · 03/11/2014, 19h43

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 :

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

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 html :

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

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>

**freddou17** · 04/11/2014, 09h18

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

++

**SpaceFrog** · 04/11/2014, 10h14

Code :

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

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

**Dark Ryus** · 04/11/2014, 10h25

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.

**SpaceFrog** · 04/11/2014, 11h40

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 ?

**Dark Ryus** · 04/11/2014, 12h02

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.

**SpaceFrog** · 04/11/2014, 12h50

je le déclenche par le code

Pas dans le code que tu nous montres en tout cas ...

**Dark Ryus** · 04/11/2014, 14h38

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.

**Bovino** · 04/11/2014, 14h59

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.

**Dark Ryus** · 04/11/2014, 15h20

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 ?

**Watilin** · 04/11/2014, 18h04

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

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.

**lenahic** · 13/03/2018, 23h15

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

onclick sur td se déclenche deux fois

jQuery

Discussions similaires

Partager

Partager