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 204 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

Aula grátis – Criando CRUD em Java, Bootstrap, Primefaces, AdminLTE, JSF, Hibernate e MySql

Share this on WhatsAppFala galera! Hoje venho divulgar um trabalho de um amigo chamado Karan Pereira que teve a iniciativa de criar vídeo aulas ensinando a fazer um crud em Java, utilizando

Curso gratuito de CSS 3

Share this on WhatsAppCurso Completo de CSS 3 Fala galera, gostaria de compartilhar com vocês um curso bem interessante e completo de CSS 3 que encontrei no youtube no canal

Curso presencial e gratuito de NodeJS em BH

Share this on WhatsAppCriando uma api com NodeJS O instrutor Paulo Henrique irá ministrar uma aula sobre os primeiros passos para a criação de uma API com NodeJS. Para participar

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