JS: when add html dynamically, they go without the event

Question

When I add html dynamically, the new elements go without reference at event. For example:

function create() {
    addButton();
}
function addButton() {
    let button = `<button type='button' class='btn btn-secondary'>Button</button>`;
    $('body').append(button);
}

$('button').on('click', create);

create();
create();
create();

This script results in 3 buttons. That when clicked adds a new button. But this new buttons when clicked nothing happens, because they have not referenced the "create" function when clicked.

Why?

The buttons that are created when the script runs, have "event". Those that are dynamically created do not.