Adicionando eventos em objetos dinâmicos com jQuery

Adicionando eventos em objetos dinâmicos com jQuery

Veja como trabalhar com eventos no Jquery

Hoje venho com um artigo muito simples mas que pode ajudar muita gente. Ontem navegando em alguns grupos do facebook vi uma dúvida que ainda é muito comum em quem ta começando a desenvolver com JQuery. Então resolvi criar este artigo para sanar este problema.

Existem vários momentos no processo de desenvolvimento que precisamos criar objetos dinâmicos em nossa página, e muitos desses objetos possui algum tipo ação, ou seja, ele terá um evento atribuído a ele. Aí começa o problema, pois ao usar o evento click o código não funciona.

Veja o exemplo abaixo:
Código html

Código Javascript

No código acima podemos perceber que existem 2 métodos, o primeiro é um botão que ao ser clicado ele irá gerar novos botões dinamicamente na divConteudo. Já o segundo método é aplicado em todos os botões que utilizam a classe btn.

Ao clicar nos botões gerados dinamicamente irá perceber que o alert não irá funcionar, pois o evento click não será reconhecido porque este é um elemento gerado dinamicamente. Para resolver o problema você terá que usar o comando live, conforme o código abaixo:

Podemos perceber que o uso do comando live é bem simples, mas para não ficar só em palavras eu fiz um vídeo mostrando comando live em ação. Vamos ao vídeo!

Quem quiser debater o assunto acesse nosso fórum:
Acesse fórum voltado para desenvolvedores

Não esqueça de curtir nossa fanpage e participar do nosso grupo no Facebook.

Previous Como gerenciar e monitorar suas aplicações com Application Insights
Next Conheça a API que fiscaliza os gastos do dinheiro público

About author

Paulo Rogério
Paulo Rogério 146 posts

Sou apaixonado por tecnologia e adoro criar aplicações desktop, web e mobile. Adoro aprender e compartilhar conhecimento, meu hobby é ajudar as pessoas.

You might also like

Workshop sobre segurança em APIs com André Baltieri

Share this on WhatsAppVeja como aplicar segurança em suas APIs Atualmente o número de construções de APIs cresceu exponencialmente, e com isso temos diversas APIs que interagem com diversos sistemas.

Conheça os segredos do javascript e saia de uma fria!

Share this on WhatsAppConheça agora o lado escuro do JavaScript! Javascript é uma linguagem que roda do lado do cliente bastante poderosa, mais ela nos reserva alguns segredos que se

Qual o melhor framework html5?

Share this on WhatsAppConstrua sites com componentes e funcionalidades mais ricas No poste de hoje venho abordar um assunto que vem atraindo cada vez mais a atenção dos desenvolvedores front-end

2 Comments

  1. Rodrigo Romano
    maio 10, 20:07 Reply
    Olá Paulo, Parabéns pelo post! Muito didático e o vídeo ajuda muito no entendimento. Entretanto, o comando Live citado foi considerado deprecado na versão 1.7+ do jQuery. http://api.jquery.com/live/ Segundo a documentação oficial da biblioteca, agora é para utilizar o On ao invés do live. Abraços e parabéns novamente!
    • paulorogerio
      maio 11, 14:36 Reply
      Rodrigo obrigado pela informação. Eu cheguei a mencionar o On no vídeo, mas não cheguei a montar o exemplo. Se tiver interesse em divulgar artigos fique a vontade, assim você fica conhecido na comunidade.

Leave a Reply