Activate the click event with a class

Question

I’m trying to add an event click to a class that is not initially present on the page, since it is added later when the user enters the data. The element in question is this:

<div class="tarefas" id="0">
     <textarea class="titulo-ef" readonly="readonly"></textarea>
     <textarea class="conteudo-ef" readonly="readonly"></textarea>
</div>

And I need to recognize the click on the textarea.titulo-ef, and as this is an element that whenever requested will be inserted a new one, I needed the click recognized the interaction with the title, but the code does not work, currently it is like this:

$(".titulo-ef").on("click",function (){
    alert("FUNCIONOU");
});

But like I said, I don’t get any warning.

Answer 1

You can use something called Event delegation to make it work. Just add the Listener of the event click to a relative of the elements:

$('.tarefas').on('click', '.titulo-ef', function() {
  alert('Funcionou!');
});

A working example (an element will be added after a few seconds using the setTimeout):

$('.parent').on('click', '.trigger', function() {
  console.log(`Botão clicado: "${$(this).text()}".`);
});

setTimeout(() => {
  // Inserimos um botão após 1,5 segundo na página.
  $('.parent').append('<button class="trigger">Segundo</button>');
}, 1500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent">
  <button>Não Executarei o Evento</button>
  <button class="trigger">Primeiro</button>
</div>

Basically, jQuery’s event delegation works as follows: Listener event is added in the parent element and if any of the children specified in the second argument of the method on (as shown in the examples above) was the Trigger of the event, the function of callback will be executed.