динамически добавить несколько jquery ui datepickers на страницу

Question

У меня есть форма, которая изначально загружается с одним выбором даты из jquery-ui. Затем пользователь может нажать кнопку «Добавить», чтобы добавить дополнительные даты. Эти новые поля даты должны добавляться в 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(); 
    }); 

Answer 1

Сначала убедитесь, что ваша функция addFormField фактически вставляет новое поле в форму. Затем вызовите .datepicker(); на любые новые поля.

Внутри addFormField:

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

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