Antes de tudo: não pesquisarei fontes para embasar o que direi.
Primeiramente:
Eu queria pelo menos fazer isso:
$('.ident').click(function() {
alert($(this).val());
});
Isso resolveria:
$('body').on("click", ".ident", function() {
alert($(this).val());
});
Como resolver esse problema?
O "seletor base" para o evento, já deve estar carregado na tela no momento em que você adiciona o listener, portanto, basta fazer um bind de evento a um elemento que já esteja na tela e utilizar dos parâmetros da função para fazer uma sub-seleção. (melhor explicado a seguir)
O que estou fazendo errado?
Você está adicionando um listener a um elemento que ainda não está presente no DOM no momento da execução.
Explicações:
Quando você adiciona um evento via JavaScript, você está atribuindo uma ação a um determinado elemento. Caso um novo elemento, mesmo que com o mesmo seletor, seja inserido no DOM após a execução desse código, ele não estará escutando esse evento.
No caso, você adicionou um evento a classe .ident
, porém, só os elementos com a classe ident
que já estivessem no DOM na hora da execução do código estariam bindados a ele.
Por quê utilizar $('body').on('click', '.ident', function(){});
resolve?
Neste caso, o evento de click está sendo adicionado ao elemento body, que já está no DOM no momento de execução, o que o jQuery está fazendo por trás neste caso, é basicamente: "após o clique dentro do elemento body, verifica se foi no elemento que tem uma classe ident
". Desta maneira, o evento está vinculado ao body, e não ao elemento com a classe ident
, o jQuery apenas confirma que o elemento clicado possui a classe desejada, ele não mantém nenhum evento bindado a classe ou outro elemento (além do body) em específico.