向页面动态添加多个jquery ui日期选择器

我有一个表单，最初从jQueryUI加载一个日期选择器。然后，用户可以单击add添加更多日期。这些新的日期字段应该附加到DOM中，但显然没有。我知道我需要或应该使用.live（）或.bind（），但我在如何使用最好的方法方面遇到了一些问题。下面是我的代码。谢谢你的建议

        // 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();
    }); 

//添加表单字段
函数addFormField（）{
var id=document.getElementById（“DateID”）.value；
//将日期表单添加到页面
$（“td#dateDiv”）。追加（
日历日期”+id+“
”；
$（'#行'+id）.高亮淡入淡出({
速度：1000
});
id=（id-1）+2；
document.getElementById（“DateID”）.value=id；
}
函数removeFormField（id）{
$（id）.remove（）；
}       
$（“#addDate”）.live（“单击”，函数（）{
addFormField（）；
}); 

首先确保addFormField函数实际上是在表单中插入新字段。然后调用

.datepicker（）

内部addFormField:

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

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

您可能想更具体地说明什么不起作用。我认为在模板中生成一个特殊的标记总是好的，一旦初始化了某些内容，就会将其删除，以防止重复。例如，所有datepicker输入都应该有类“.do datepicker init”，代码应该是：
$（'.do datepicker init'）.removeClass（'do-datepicker-init'）.datepicker（）