Chamar função de click após a criação do elemento.

Boa noite,

Estou criando um projeto pessoal e estou com dificuldade no seguinte... Uso uma função para recuperar dados de um Json e então depois de recuperados crio elementos html na pagina, como uma <div></div> com as informações recuperadas.

Porém após a criação desses elementos também crio botões com funções para dentro deles, mas sempre essas funções são ignoradas, pois elas estão existindo antes da API termina de responder, tanto que eu posso colocar as funções no console do navegador após a criação dos elementos e ela funciona normalmente... Eu até posso usar um setTimeOut, ou então usar o evento de onclick="" já dentro do elemento........

Mas não existe alguma função de eu esperar o elemento ser criado? E ai, e só ai então eu permitir o evento de click seguinte ?? até pensei em usar async e await mas não consegui fazendo testes separados... Alguém consegue me tirar essa duvida ?

Olá Renato, tudo bem?

Entendo sua dificuldade em executar as funções de click após a criação dos elementos. Uma solução para esse problema é utilizar o evento "DOMContentLoaded", que é acionado quando o documento HTML é completamente carregado e analisado, sem esperar pelo CSS, imagens ou subframes para finalizar o carregamento.

Dessa forma, você pode colocar suas funções de click dentro do evento "DOMContentLoaded" e garantir que elas só serão executadas após a criação completa dos elementos na página.

Segue um exemplo de como utilizar o evento:

document.addEventListener("DOMContentLoaded", function(event) {
  // Coloque aqui suas funções de click
});

Espero ter ajudado.

Um abraço e bons estudos.

Mergulhe em programação