Asignar eventos a elementos creados dinámicamente [Javascript, jquery]

Si alguna vez han programado front-end tal vez se hayan enfrentado al problema de asignar eventos a elementos que crearon dinámicamente.

Digamos que crean una vista donde se tiene un boton que se crean según alguna acción del usuario:

$(document).ready(function(){
    elemets = '<input type="button" value="test" id="button-created">';
    $("#container").append(elements);
    $("#button-created").on("click", function(){
        console.log("Clicked");
    });
}

Si ejecutamos el código anterior no nos ejecutara el evento programado.

Una manera de asignar eventos a los elementos recién creados es asignadoselos al elemento padre de los recién añadidos al DOM.

$(document).ready(function(){
    elemets = '<input type="button" value="test" id="button-created">';
    $("#container").append(elements);
    $("#container").on("click", "#button-created", null, function(){
        console.log("Clicked");
    });
}

De esta manera podemos añadir cualquier numero de elementos al DOM y todos ejecutaran según el evento programado.

Pueden revisar la documentación de jquery para conocer mas acerca de la función $.on y esta pagina de la documentación de jquery donde explican todo lo referente a los eventos.