Jak dołączyć datepicker jQuery UI do dynamicznie wstawianego pola formularza?

Question

Mam tabelę zawierającą kilka pól wejściowych, coś w rodzaju arkusza kalkulacyjnego. Niektóre pola wejściowe używają datepicker jQuery UI. Istnieje również przycisk do dodania wiersza tabeli.

Po kliknięciu przycisku w celu dodania wiersza tabeli jest on prawidłowo dodawany do DOM. Jednak widget datepicker nie jest dołączany do pól daty w tym nowym wierszu.

Podejrzewam, że odpowiedzią jest użycie live() - lub może on() - do wywołania datepicker(), ale nie rozumiem, jakiej składni użyć. Poniższy kod już przesuwa granice mojego rozumienia jQuery. Boli mnie głowa. Wsparcie?

<script type="text/javascript"> 
    $(function() { 
     $(".usedatepicker").datepicker(); 
    }); 

    $('.rowadd').live('click',function(){ 
     var appendTxt = '<tr><td><input class="usedatepicker" name="something" type="text" /></td></tr>'; 
     $("tr:last").after(appendTxt); 
    }); 

</script> 

Uwaga 2: Próbowałem tego również, zarówno z live(), jak i on(). Wydaje się działać zarówno na oryginalnych polach, jak i dynamicznie wstawianych, ale sporadycznie (przynajmniej w Chrome). Podobnie jak to będzie działać przez trzy sekundy, a następnie zatrzymać się na trzy sekundy, a następnie pracować na trzy sekundy i ...

$(function() { 
    $('.usedatepicker').live('click', function(){ 
     $(this).datepicker({showOn:'focus'}); 
    }); 
}); 

Answer 1

Wystarczy ponownie powiązać datepicker po dodaniu nowego wiersza. Jeśli to się nie powiedzie, spróbuj użyć metody "odświeżania".

$('.rowadd').live('click',function(){ 
     var appendTxt = '<tr><td><input class="usedatepicker" name="something" type="text" /></td></tr>'; 
     $("tr:last").after(appendTxt); 
     $(".usedatepicker").datepicker(); // or 
     $(".usedatepicker").datepicker("refresh"); 
    });