##Versão com puro Javascript:
Primeiro criamos esta pequena função que vai separar as classes do elemento individualmente caso este tenha multiplas classes utilizando o `.split()`, logo em seguida utilizando o `.indexOf()` indicamos-lhe para começar a procura do nome da classe com o index de `-1`, que basicamente é verificar por algo que ainda não está neste grupo.
Tem Classe?
```
function temClasse(elem, className) {
return elem.className.split(' ').indexOf(className) > -1;
}
```
Em seguida então vamos controlar o que se passa no evento clique.
No primeiro exemplo que postei, tinha apontado o clique para o documento mas corrigi agora apontando-o para o elemento parent que é uma melhor prática pois assim não estamos a verificar cliques no documento mas sim no elemento alvo que é o que nos interessa.
Quando ocorre um click no elemento parent, que neste caso será a classe `.container`, vamos verificar com o `if` se este clique foi no elemento alvo (target) com a classe `el-alvo` ou não, juntamente nesta mesma verificação do `if` iremos correr a função temClass para procurar por novos elementos `indexOf() > -1`.
Clicou no elemento alvo?
```
var container = document.querySelector('.container');
container.addEventListener('click', function (e) {
if (temClasse(e.target, 'el-alvo')) {
alert(e.target.id);
}
});
```
Recapitulando esta parte, sempre que ocorrer um clique no `.container`, `=>` if/se este clique foi num elemento `child` com a classe `.el-alvo` juntamente verifica também se existem novos elementos `=>` faz alguma coisa.
###Exemplo:
```
var container = document.querySelector('.container');
// Código abaixo não interessa. Apenas para criar novos elementos
document.getElementById('add-el').addEventListener('click', function() {
var el = document.createElement('li');
var id = Math.floor(Math.random() * 2000);
el.id = id;
el.className = 'el-alvo';
el.innerHTML = id;
container.appendChild(el);
});
function temClasse(elem, className) {
return elem.className.split(' ').indexOf(className) > -1;
}
container.addEventListener('click', function (e) {
if (temClasse(e.target, 'el-alvo')) {
alert(e.target.id);
}
});
```
```
.container li {
padding: 5px;
background-color: #fff;
color: #000;
}
.container li:nth-child(odd) {
background-color: #eee;
}
```
```
<ul class="container">
<li id="primeiro" class="el-alvo">primeiro</li>
<li id="segundo" class="el-alvo">segundo</li>
<li id="terceiro" class="el-alvo">terceiro</li>
</ul>
<button id="add-el" type="button">Add li</button>
```
Exemplo online no jsFiddle: https://jsfiddle.net/shuffledPixels/Lqvw7ehL/
> Mais sobre o `split()` aqui: w3schools - split() Method
> Mais sobre o `indexOf()` aqui: w3schools - indexOf() Method
[ad:in-body]
##Versão jQuery seria algo como:
Com jQuery seria algo mais curto como neste exemplo abaixo:
```
// Código abaixo não interessa. Apenas para criar novos elementos
document.getElementById('add-el').addEventListener('click', function() {
var el = document.createElement('li');
el.className = "el-alvo";
var id = Math.floor(Math.random() * 2000);
el.id = id;
el.innerHTML = id;
document.querySelector('.container').appendChild(el);
});
// com jQuery
$('.container').on('click', '.el-alvo', function(e) {
alert(e.target.id);
});
```
```
.container li {
padding: 5px;
background-color: #fff;
color: #000;
}
.container li:nth-child(odd) {
background-color: #eee;
}
```
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<ul class="container">
<li id="primeiro" class="el-alvo">primeiro</li>
<li id="segundo" class="el-alvo">segundo</li>
<li id="terceiro" class="el-alvo">terceiro</li>
</ul>
<button id="add-el" type="button">Add li</button>
```
Exemplo online no jsFiddle: https://jsfiddle.net/shuffledPixels/Lgys7Lbn/
click, clique, event, pure, vanilla, js, get, obter,