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

Mobile 0 Comments

Veja como criar aplicação web, desktop e mobile com um único código

Share this on WhatsAppAndré Baltieri disponibiliza curso que leva AngularJS pra todo lado Esta semana nosso parceiro e amigo André Baltieri disponibilizou um curso muito interessante onde ele irá mostrar

Depurando sites com Chrome Developer Tools

Share this on WhatsAppFala Dev!Depois de realizar muitas consultorias ajudando outros Devs no mercado de trabalho, percebi uma dificuldade em comum. O problema Se você se enquadrar na listagem abaixo,

FrontEnd 0 Comments

Hangout – Conhecendo o angularJS 2 com André Baltieri e Nicolas Takashi

Share this on WhatsAppConfira Hangout ao vivo sobre Angular 2 e tire suas dúvidas Sabemos que o Angular JS é um framework javascript mantido pela gigante Google e que cresce

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