jQuery datepicker not working on dynamically inserted html element
<p>This same question has been asked repeatedly, and the only time it has been answered is the one where the fellow was trying to initialise datepicker in the .onReady() function.  I am not doing that.  In fact, I am actually doing what that solution is doing; implementing datepicker immediately after creating the element.</p>

<p>Here is my template code:</p>

<pre><code>&lt;input type=text name="txt_you_History_From_Date_XXX" id="txt_you_History_From_Date_XXX" class="month-picker inputField" size=16 maxlength=16&gt;
</code></pre>

<p>You will notice the month-picker class.  Also, you will notice the "XXX" placeholders.</p>

<p>Here is the code that inserts that template code:</p>

<pre><code>//
// find the next available id
//

for (var i = 0; ; i++) {
    if (!$("#divEmployer_" + i.toString()).length) {
        break;
    }
}


//
// get html, and replace the placeholders with id, then append.
//

$.get("content/contentHistoryEmployerTemplate.html", function (data) {

    while (data.indexOf("XXX") &gt;= 0) {
        data = data.replace("XXX", i.toString());
    }

    $("#employerDIV").append(data);
});


//
// activate datepicker on all month-picker class elements
//

$('.month-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    onClose: function (dateText, inst) {
        $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    }
});

//alert("here");
</code></pre>

<p>I do see the "here" alert if I uncomment it, so I know the code is being run.  </p>

<p>The datepicker() throws no error. </p>

<p>I know the function is available because if I comment out my jquery-ui-min.js in my <code>&lt;HEAD&gt;</code>, a reference to datepicker() does then throw an error.</p>

<p>But the field does not respond when it receives focus.  The datepicker does not appear.</p>

<p>Can anyone tell me what's wrong?  Thanks!</p>