1

Estou tentando adicionar um evento click a uma classe que inicialmente não esta presente na página, já que é adicionada posteriormente, quando o usuário inserir os dados. O elemento em questão é esse:

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

E eu preciso reconhecer o click sobre a textarea.titulo-ef, e como esse é um elemento que sempre que requisitado vai ser inserido um novo, eu precisava que o click reconhecesse a interação com o título, porem o código não funciona, atualmente está assim:

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

Mas como disse, não recebo alerta algum.

0

1 Resposta 1

0

Você pode usar algo chamado event delegation para fazer isso funcionar. Basta adicionar o listener do evento click a um parente dos elementos:

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

Um exemplo funcionando (um elemento será adicionado depois de alguns segundos utilizando o 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>

Basicamente, a delegação de eventos do jQuery funciona da seguinte maneira: o listener de evento é adicionado no elemento pai e se qualquer qualquer um dos filhos especificados no segundo argumento do método on (conforme mostrado nos exemplos acima) tiver sido o trigger do evento, a função de callback será executada.

5
  • O codigo dessa forma que disse funcionou porem, não com o ".tarefas" acho que é porque ele tambem é adicionado posteriormente, porem fiz com um parente mais externo do escopo e funcionou perfeitamente, você sabe me dizer se é possivel de alguma forma reconhecer qual dos "titulo-ef" foi clicado pelo user? 23/11/2019 às 1:22
  • Você pode adicionar uma classe específica a cada botão e utilizar o $(this) dentro do callback para realizar a distinção. Conforme mostrado no meu segundo exemplo, usei o $(this) para imprimir o texto do botão clicado — que é diferente entre ambos os botões. Seria isso? 23/11/2019 às 1:23
  • Creio que sim, pois como vou precisar efetuar alterações com essas divs, como transferir de uma para outra eu precisaria identificar o "titulo-ef" clicado, para fazer a transferencia do conteudo desse elemento para outra div, por acaso se ao invés de utilizar uma class diferente para cada eu utilizar uma ID diferente funcionara da mesma forma com o $(this)? 23/11/2019 às 1:27
  • Sim. O $(this) é um objeto normal do jQuery e você pode fazer qualquer coisa com ele. Pense no $(this) como se fosse o $('elemento-que-ativou-o-evento'). Você pode obter o ID da seguinte forma: $(this).attr('id'). :) 23/11/2019 às 1:29
  • Ok muito obrigado por todas as infos vou fazer o possivel pra dar certo isso aqui. thx :) 23/11/2019 às 1:51

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .