Activate the click event with a class

Asked

Viewed 82 times

1

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.

javascript jquery

1 answer

0


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.

  • The code that you said worked, but not with the ". tasks" I think it is because it is also added later, however I did with a more external relative of the scope and it worked perfectly, you can tell me if it is possible to somehow recognize which of the "title-E" was clicked by the user?

  • You can add a specific class to each button and use the $(this) within the callback to make the distinction. As shown in my second example, I used the $(this) to print the text of the button clicked - which is different between both buttons. That would be it?

  • I think so, because as I will need to make changes with these Ivs, how to transfer from one to another I would need to identify the clicked "title-Ef" to transfer the content of this element to another div, by chance if instead of using a different class for each I use a different ID it will work the same way with $(this)?

  • Yes. The $(this) is a normal jQuery object and you can do anything with it. Think about $(this) as if it were the $('elemento-que-ativou-o-evento'). You can get the ID as follows: $(this).attr('id'). :)

  • OK thank you so much for all the hints I will do everything possible to make it right here. thx :)

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.