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

Curso completo de Node.Js em português

Share this on WhatsAppAprenda tudo sobre Node.Js hoje mesmo! O que é Node.Js Node.js é uma plataforma construída sobre o motor JavaScript do Google Chrome para facilmente construir aplicações de

Conheça alguns segredos do Chrome DevTools

Share this on WhatsAppE ai pessoal beleza? Bom espero que sim, aproveitando um tempinho livre que tive aqui, resolvi compartilhar com vocês alguns segredinhos do Chrome DevTools. Na verdade não

Aprenda TypeScript com Andre Baltieri

Share this on WhatsAppVeja agora vídeo aulas interessantes sobre TypeScript Para quem ainda não conhece, TypeScript é uma linguagem para desenvolvimento JavaScript em larga escala. Com TypeScript podemos escrever código

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