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

PontoCanal disponibiliza curso gratuito de PHP avançado

Share this on WhatsAppAprenda PHP avançado através de vídeo aulas PHP é uma linguagem de programação que processa ao lado do servidor e renderiza o conteúdo HTML gerado no cliente. As

Visual Studio 0 Comments

Curso grátis – Dominando Linq e Lambda Expressions com C#

Share this on WhatsAppLinq é um set de recursos introduzidos no framework do dotnet que nos permite trabalhar  com coleções de dados de uma forma muito eficaz. Se você deseja

Aprenda testar serviços com o Postman

Share this on WhatsAppConheça agora o plugin Postman Postman ajuda você a ser extremamente eficiente ao trabalhar com APIs, com ele você pode construir solicitações rapidamente, guardá-las para uso posterior

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