Propagation du gestionnaire d'événement

**yourth** · 14/12/2022, 06h56

Bonjour à tous,

Je suis débutant en Javascript et pour m'entrainer j'ai un projet de programme un peu complexe de plusieurs partie dont l'une me pose soucis.
Je ne vous met pas l'intégralité du code (qui contient plusieurs fichier php, css, JS, avec une BDD SQL) mais le code ci-dessous contient la partie de mon problème en mode "simplifié".

En gros je souhaite mettre un gestionnaire d'événement (via JQUERY) sur un bouton qui n'est crée que lors du click sur un autre bouton et récupérer l'ID du nouveau bouton ainsi créé.
(la réalité du script est un peu plus complexe car l'ID du bouton ainsi généré est variable et créé dans une boucle.

Voici le script en question:

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
<!DOCTYPE html>
<html>
    <body>
        <button class="test" id="blue">X</button>
        <button class="demo" id="valid">Affiche</button>
        <p id="result"></p>
    </body>
    <script src="JS_code/jquery-3.6.1.js"></script>
    <script>
        $('.test').click(function(){
            var id = $(this).attr("id");
            console.log(id);
        });
        $('.demo').click(function (){
            document.getElementById('result').innerHTML='<button class="test" id="0">New button</button>';
        });
    </script>
</html>

J'ai volontairement mis un autre bouton dans le code (le premier) généré d’emblée dans le code afin de vérifier que j'arrive bien à récupérer son ID dans la console.
et le résultat en gros c'est:
- quand le bouton existe déjà dans le code : la récupération de l'ID fonctionne
- quand le bouton est généré après chargement de la page par l’exécution d'une fonction: la récupération de l'ID ne fonctionne pas.

Mes questions :
1- Est ce que je fais une erreur ? (probablement vu que ça ne fonctionne pas)
2- Pas d'erreur mais cela n'est pas possible ? ((probablement vu que la récupération de l'ID fonctionne sur le "bouton 1" mais pas sur le bouton généré)
3- Il existe une autre façon de faire dans cette situation (probablement mais je vois pas laquelle)
4- La réponse 4

En tout cas merci infiniment de votre aide, et d'avoir lu jusque là. et si je n'ai pas été clair n'hésitez pas à me le dire je reformulerai.

Merci et bonne journée

**Doksuri** · 14/12/2022, 09h26

bonjour, ton probleme est "normal"... le JS est execute au moment ou le navigateur le "lit" donc si ton bouton existe dans la page.. il arrive au JS, le JS trouve ce bouton
si ton bouton est cree plus tard, le JS ne le trouve pas
si tu veux creer ton bouton plus tard, il faut creer le JS qui va avec a ce moment-la

ps: quitte a debuter en JS, autant le faire sur de bonne bases (sans jQuery)

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
document.querySelector('.test').addEventListener('click', function() {
  const id = this.id;
  console.log(id);
});
document.querySelector('.demo').addEventListener('click', function (){
  const btn = document.createElement('button');
  btn.textContent = 'New button';
  btn.className = 'test';
  document.getElementById('result').append(btn)
});

ps : voici comment faire quand le bouton est ajoute plus tard

Code html :

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

1
2
<button class="test" id="blue">X</button>
        <p id="result"></p>

Code javascript :

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
document.querySelector('.test').addEventListener('click', function() {
  const id = this.id;
  console.log(id);
});
 
setTimeout(() => { // simulation bouton ajoute plus tard
	const btnDemo = document.createElement('button');
  btnDemo.textContent = 'afficher';
  btnDemo.className = 'demo';
  btnDemo.id = 'valid';
  document.body.append(btnDemo);
 
  btnDemo.addEventListener('click', function (){
    const btn = document.createElement('button');
    btn.textContent = 'New button';
    btn.className = 'test';
    document.getElementById('result').append(btn);
  });
}, 1E3);

**yourth** · 16/12/2022, 06h51

Merci beaucoup pour ta réponse.
Effectivement j'utilise JQUERY ce qui n'est pas forcément idéal pour commencer. Cependant, j'ai utilisé d'autre langage de programmation avant (Python, Kotlin, ...) et c'est des syntaxes et mécanisme que je comprend assez bien, et je trouve JQUERY finalement plus agréable et facile à lire.
Merci encore pour ta réponse j'ai pu faire ce que je voulais.
Voilà mon code :

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
<!DOCTYPE html>
<html>
    <body>
        <button class="test" id="blue">X</button>
        <button class="demo" id="valid">Affiche</button>
        <p id="result"></p>
    </body>
    <script src="JS_code/jquery-3.6.1.js"></script>
    <script>
        $('.test').click(function(){
            var id = $(this).attr("id");
            console.log(id);
        });
        // simulation bouton ajoute plus tard
        $('.demo').click(function (){
            const btn = document.createElement('button');
            btn.textContent = 'New button';
            btn.className = 'testnew';
            btn.id="blabla";
            document.getElementById('result').append(btn);
            $('.testnew').click(function(){
                var id = $(this).attr("id");
                console.log(id);
            });
            });
    </script>
</html>

Bonne journée

**NoSmoking** · 16/12/2022, 09h03

Bonjour,

et je trouve JQUERY finalement plus agréable et facile à lire.

certes mais là tu utilises un mixte jQuery « JS vanilla » ce qui n'est pas forcément la meilleur façon de faire, lorsque l'on utilise jQuery autant l'utiliser en plein pour la cohérence du code.

On peut faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
// ajout des propriétés via les méthodes
$("<button>")
  .text("New button")
  .attr("className", "new-class")
  .attr("id", "id-button")
  .appendTo($("#result"))
  .on("click", function() {
    const id = $(this).attr("id");
    console.log(id);
  })

ou encore :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
// ajoute des propriétés via un objet en option
$("<button>", {
    text: "New button",
    className: "new-class",
    id: "id-button"
  })
  .appendTo($("#result"))
  .on("click", function() {
    const id = $(this).attr("id");
    console.log(id);
  })

mais est-ce plus lisible que le même code en « JS vanilla », soit :

Code :

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

1
2
3
4
5
6
7
8
9
10
// construction via JS vanilla  
const btn = document.createElement("button");
  btn.textContent = "New button";
  btn.className = "new-class";
  btn.id = "id-button";
document.getElementById("result").append(btn);
btn.addEventListener("click", function() {
  const id = this.id;
  console.log(id);
});

Propagation du gestionnaire d'événement

JavaScript

Discussions similaires

Partager

Partager