Button created in JS no event

Question

I think is is a simple problem. What i did is to create a button 'remove' in JS when I click an a button 'add' and append it to a existing div.

This works well. BUT for the new created button 'remove' I want to fire a new event - the remove event. This didn't work. What is the problem here?

$(document).ready(function() {

  $('#mybutton').on('click', function() {
    $('#dateTimeSelector').append('<button type="button" class="btn btn-link removedate" rel="contents" title="Termin entfernen">remove</button>');
  });

  $('.removedate').on('click', function() {
    console.log('remove #dateTimeBox_' + $(this).data());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mybutton">
  add
</button>
<div id=dateTimeSelector></div>

Answer 1

You need to bind the new removedate click event after placing on the page, so within the #mybutton click handler.

This is because when the click handler addition for removedate appens on page load, there are no matches in the jquery selector.