Pick up dynamically created element

Question

I am generating a dynamically A tag in a pure AJAX file, without Jquery. The code:

 if(xhr.status == 200){

  console.log(xhr.responseText);
  let resposta = xhr.responseText;
  resposta = JSON.parse(resposta);

  let x = document.querySelector('#resposta')
  resposta.map(item =>{

    x.innerHTML += '<a value='+ item.id +' class="descricao-resposta" 
  id="resposta-selecionada">'+ item.descricao +'</a>'
  });

My problem is that I need to capture this A tag later to do an event with it, I’m trying to capture this way.

var btnResponde = document.querySelector('#resposta-selecionada');
btnResponde.addEventListener('click', function(evento){

evento.preventDefault();
respondeExercicio();
});

But the console says that my addEventeListener is coming null, IE, is not finding the code that I am generating dynamically. How can I do that?

Answer 1

I made a small example to better exemplify, this way the event works normally:

let x = document.querySelector('#resposta');

x.innerHTML = '<a href="#" data-value="1" class="descricao-resposta" id="resposta-selecionada">teste</a><br/>';

var btnResponde = document.querySelector('#resposta-selecionada');

btnResponde.addEventListener('click', function(evento){
    evento.preventDefault();
    respondeExercicio();
});

function respondeExercicio(){
    alert('ok');
}

Upshot: https://jsfiddle.net/uts27ejk/7/

Now I’m adding two buttons:

let x = document.querySelector('#resposta');

x.innerHTML = '<a href="#" data-value="1" class="descricao-resposta" id="resposta-selecionada">teste</a><br/>';
x.innerHTML += '<a href="#" data-value="1" class="descricao-resposta" id="resposta-selecionada">teste</a><br/>';

var btnResponde = document.querySelector('#resposta-selecionada');

btnResponde.addEventListener('click', function(evento){
    evento.preventDefault();
    respondeExercicio();
});

function respondeExercicio(){
    alert('ok');
}

You can notice, that the second button does not work, this is because there cannot be two buttons with the same id, so it only assigns the event to the first button.

Upshot: https://jsfiddle.net/uts27ejk/9/

You can solve this way:

let x = document.querySelector('#resposta');

x.innerHTML = '<a href="#" data-value="1" class="descricao-resposta" >teste</a><br/>';
x.innerHTML += '<a href="#" data-value="1" class="descricao-resposta" >teste</a><br/>';

var elementos = document.querySelectorAll('.descricao-resposta');

[].forEach.call(elementos, function(elemento) {
  elemento.addEventListener('click', function(evento){
      evento.preventDefault();
      respondeExercicio();
  });
});

function respondeExercicio(){
    alert('ok');
}

Upshot: https://jsfiddle.net/uts27ejk/18/

So you use only the class (since it can be repeated) makes a foreach to go through all the elements and assign the desired event.