$( "#TheTable" ).on("change",".datepicker",function() {
This should work.
.on()
works by listening to a parent element for events that bubble up (see here for explanation of bubbling - first paragraph), so that events fired by new elements bubble up to the parent that is being listened to.
As a side note, I'd like to mention that it is a good idea to listen to the the lowest common parent of the desired elements, otherwise jQuery will evaluate unnecessary events.
Here are the key points of the .on()
docs:
.on( events [, selector ] [, data ], handler(eventObject) )
The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document
element. In Internet Explorer 8 and lower, a few events such as change
and submit
do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.
If selector
is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.
When a selector
is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()