dynamically add multiple jquery ui datepickers to page

Question

Hello,

I have a form that initially loads with one date picker from the jquery-ui. A user can then click on add to add more dates. These new date fields should append to the DOM, but apparently don't. I know I need or should use .live() or .bind() but I am having some trouble on the best way to do this. Below is the code I have. Thank you for any ideas.

        // add a formfield
    function addFormField() {
        var id = document.getElementById("DateID").value;                       

        // add date form to page
        $("td#dateDiv").append("<p id='row" + id + "'> Calendar Dates " + id + " <br> <input type='text' size='20' class='hasDatepicker' name='inputDate[]' id='inputDate" + id + "'>&nbsp;&nbsp<a href='#' onClick='removeFormField(\"#row" + id + "\"); return false;'>Remove</a><p>");

        $('#row' + id).highlightFade({
            speed:1000
        });

        id=(id-1) + 2;
        document.getElementById("DateID").value = id;
    }

    function removeFormField(id) {
        $(id).remove();
    }       

    $("#addDate").live("click", function(){
          addFormField();
    }); 

Answer 1

First insure that your addFormField function is actually inserting the new field into the form . Then call .datepicker(); on any new fields.

Inside addFormField:

$("td#dateDiv").append(...

$("td#dateDiv").find(".hasDatepicker").datepicker();