How to connect jQuery UI datepicker to dynamically inserted formfield?

Question

I have a table containing many input fields, like a table. Some of the input fields use jQuery UI datepicker. There is also a button to add a table row.

When I click a button to add a table row, it is added to the DOM correctly. But the datepicker widget does not bind to the date fields on this new line.

I suspect the answer is to use live () - or perhaps on () - to call datepicker (), but I don't understand which syntax to use. The following code is already pushing the limits of my understanding of jQuery. My head hurts. Help?

<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>

2: , live(), on(). , , , ( , Chrome). , , , ...

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

Answer 1

. , "".

$('.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"); 
    });