Puro Javascript - Evento "click" em elementos criados dinamicamente após carregamento do DOM

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

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>