jQuery bind after ajax load

Sometimes it is needed to add a jQuery event listener to an element that isn’t present in the DOM at the creation of the page but created during runtime or the result of an ajax call.

What doesn’t work is

jQuery(document).ready(function () {
    jQuery('.selector').on({
        click: function  (event){
            event.preventDefault();
            console.log('I work only with existing elements');
        }
    });
});

However, there is a way to achieve that.

jQuery(document).ready(function () {
    jQuery(document).on('click', '.selector', function (event){
        event.preventDefault();
        console.log('I work with a dynamically created elements');
    });
});