JQuery não reconhece classes adicionadas à página dinamicamente

Neste post mostrarei para vocês como resolver um problema para quem está usando JQuery e possui os elementos sendo chamados dinamicamente. Se esses elementos são chamados dinamicamente e são incluídos (talvez pelo “apend”) no HTML, talvez não consigam chamar alguma função no JQuery usando a classe do elemento porque o JQuery não reconhece essa classe. Vamos a solução.

A solução para esse problema encontrei no StackOverflow. Você pode encontrar o post original aqui. Abaixo irei traduzir a pergunta e o resultado. Ajudou a mim e pode ajudar você.

PERGUNTA (por Camden Reslink)

Estou trabalhando em um projeto, onde eu gostaria de adicionar muitos elementos de uma mesma classe na página, e fazer todas essas classes acessarem ao evento no cabeçalho $(‘selector’).click();. O que porém está acontecendo é que nenhum dos elementos de mesma classe adicionados dinamicamente estão respondendo aos clicks.

Para dar a vocês uma melhor ideia do que estou querendo dizer, eu fiz um simples jsFiddle, que é muito similar ao atual problema do meu projeto:

Link para o jsFiddle: http://jsfiddle.net/8LATf/3/

• Um elemento da classe “added_element” já está na página quando ela carrega. Esse elemento é ‘clicável’;
• Um botão é pressionado, e esse adiciona outros elementos com a classe “added_element” para a página dinamicamente, usando append. Nenhum desses elementos é clicável.

Como eu posso fazer todos esses elementos da classe “added_element” ‘clicáveis’? (…)

RESPOSTA (por Blazemonger)

Você precisa delegar seu cabeçalho. O modo mais fácil é delegar tudo para o ‘document’ usando .on(‘click’, …) (isso é como .live() é convertido internamente no jQuery 1.7):

$(document).on('click','.added_element',function() {
    var id = $(this).attr('id');
    alert(id);    
});

​http://jsfiddle.net/mblase75/8LATf/4/

Porém, em seu caso, você pode delegar para o “#container”, desde que todos os elementos adicionados aparecem com esse id. Delegando para o elemento DOM mais fechado possível é preferível por razão de performance, quando é possível.

$('#container').on('click','.added_element',function() {
    var id = $(this).attr('id');
    alert(id);    
});

​ ​http://jsfiddle.net/mblase75/8LATf/5/

Fonte

StackOverflow. Disponível em: http://stackoverflow.com/questions/11190930/jquery-not-recognizing-classes-added-to-page-dynamically. Acesso em 27/05/2015.