Objects added dynamically to the DOM don't respond to jQuery Events

Question 1

$( "#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.

See jQuery docs for .on()

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

Question 2

You need to be listening to the parent to be able to target dynamically drawn content. Replace:

$(document).ready(function() {
  $( ".datepicker" ).datepicker();
  $( ".datepicker" ).on("change",function() {
    $( ".datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
  });
});

with:

$(document).ready(function() {
  $( ".datepicker" ).datepicker();
  $( '#TheTable' ).on("change",'.datepicker',function() {
    $( this ).datepicker( "option", "dateFormat", "yy-mm-dd" );
  });
});

Question 3

You don't need event delegation; just set your options at the beginning. Then, in your function, trigger the datepicker method (with the desired options) on the new element as you're adding it.

$(".datepicker").datepicker("option", "dateFormat", "yy-mm-dd");

function addRow() {   
    var table = document.getElementById("TheTable");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML='Date';
    $('<input type="text" class="datepicker"/>')
        .datepicker("option", "dateFormat", "yy-mm-dd")
        .appendTo(cell2);
}