Button erstellt in JS kein Ereignis

Question

Ich denke, es ist ein einfaches Problem. Was ich getan habe, ist eine Schaltfläche 'Entfernen' in JS zu erstellen, wenn ich auf eine Schaltfläche 'Hinzufügen' klicke und sie an ein bestehendes div angehängt habe.

Das funktioniert gut. ABER für den neu erstellten Button 'Entfernen' möchte ich ein neues Event auslösen - das remove-Event. Das hat nicht funktioniert. Was ist das Problem hier?

$(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

Sie müssen das neue removedate Click-Ereignis nach der Platzierung auf der Seite binden, so im #mybutton Click-Handler.

Dies liegt daran, dass, wenn die Click-Handler-Zugabe für removedate beim Laden der Seite auftritt, keine Übereinstimmungen im jquery-Selektor vorhanden sind.