HTML element created with jQuery doesn't have an event [duplicate]

This question already has an answer here:

• Event binding on dynamically created elements? 19 answers

I have a button with the class ".test-class" that when is clicked, a checkbox is created and the message "Clicked" is shown on the console. This works great.

The checkbox must have the same event handler. But I click on the checkbox and the console doesn't show anything. It is like the checkbox doesn't have an event.

This is jQuery Code:

$(".test-class").on("click", function() {
    console.log('Clicked.');
    $("#myDiv").empty().append('<input type=checkbox class=test-class>');
});

This is the button and the div:

<button type="button" class="test-class">Click me</button>
<div id="myDiv">
    <!-- Here will appear a new checkbox. -->
</div>

The Developer's Tool shows the elements:

<button type="button" class="test-class">Click me</button>
<div id="mydiv">
    <input type="checkbox" class="test-class">
</div>

This question is a bit similar.