Why does this event not work?

Why does this event not work?

Hi,

This is the event I have, but I need to change it so it can accept dynamically created elements being dropped on it.  the time-line-schedule element is permanent, but the event-box class comes and goes.

 $('#time-line-schedule .event-box').droppable({
           hoverClass: "hoveringAbove",
   activeClass: "hoveringAround",
   drop: function( event, ui ) {
             }
});

I change it to this but the event never fires.  Any idea what I'm doing wrong here?

$('#time-line-schedule').on("drop",".event-box",function(event, ui){
});