Comment puis-je cliquer sur un élément qui est créé dynamiquement lors d'un clic sur un bouton ?

Question

Je voulais faire une application simple de liste de tâches à faire, j'ai créé une fonction qui obtient la valeur de la zone de saisie et à l'intérieur de cette fonction crée une case à cocher à côté du texte, maintenant je veux créer une fonction qui s'exécute chaque fois que la case à cocher est cliquée. Puisque la case à cocher n'est pas sur la page lorsque les documents sont chargés, je reçois une erreur, comment puis-je faire en sorte que cela fonctionne correctement ?

Voici mon code :

var btn = window.document.getElementById("btn");
var result = window.document.getElementById("result");

function getValue() {
  var input = window.document.getElementById("input").value;
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.className = 'checkbox';
  result.appendChild(checkbox);
  result.innerHTML += input + "";

}

var checkbox = document.getElementById('checkbox');

btn.addEventListener('click', getValue);
checkbox.addEventListener('click', function(){
  alert("Cliqué");
});

Answer 1

C'est ainsi que c'est fait.

Vous devez déplacer l'addEventListener après avoir créé votre case à cocher.

De plus, vous devez utiliser createTextNode car l'utilisation de innerHTML détache vos addEventListeners (1). Pour cette même raison, vous devez déplacer appendChild en bas de la fonction.

var btn = window.document.getElementById("btn");
var result = window.document.getElementById("result");

function getValue() {
  var input = window.document.getElementById("input").value;
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.addEventListener('click', function(){
    alert("Cliqué");
  });
  text = document.createTextNode(input);
  result.appendChild(checkbox);
  result.appendChild(text);
}

var checkbox = document.getElementById('checkbox');

btn.addEventListener('click', getValue);

Answer 2

Malheureusement, je ne suis pas près de mon ordinateur et je ne peux pas vous taper un exemple de code. Je suppose que vous aimeriez que la nouvelle case à cocher ajoutée appelle une fonction lorsque vous cliquez dessus ? Pour ce faire, vous devrez ajouter un écouteur d'événements à la nouvelle case à cocher, après sa création. Vous pouvez le faire à l'intérieur de votre fonction qui crée la nouvelle case à cocher (getValue).

Si ce que je dis n'est pas clair, je vous écrirai plus tard un exemple de code.