Eventos de ligação em elementos que são adicionados dinamicamente ao DOM

Se seu aplicativo for como a maioria dos aplicativos da web, provavelmente está cheio de AJAX. Suponha que você tenha uma página que renderiza alguns botões ou links, mas também adiciona dinamicamente mais desses elementos à medida que os eventos acontecem, como um evento de paginação AJAX. Para culminar, todos esses elementos têm eventos vinculados a eles (pense em clicar em “Curtir” na postagem de um amigo no Facebook que não estava inicialmente visível na página “).

Como você lida com eventos para qualquer um desses links, independentemente de quando eles aparecem no DOM?

A maneira padrão funciona … parcialmente:

$(".awesome-button").on("click", function(e) {
    // do awesome and blow your mind
    // Uh oh. Doesn't work for dynamically added elements
});

Aqui está o que o leva até o fim:

$(document).on("click", ".awesome-button", function(event) {
    // do awesome and blow your mind
});

Agora, todos os elementos, independentemente de quando forem adicionados ao DOM, responderão a esse evento de clique. Você pode substituir “.awesome-button” por seu seletor favorito.

Muito legal né?