Cómo adjuntar jQuery UI datepicker a formfield insertado dinámicamente?

Question

Tengo una tabla que contiene un grupo de campos de entrada, algo así como una hoja de cálculo. Algunos de los campos de entrada usan el jQuery UI datepicker. También hay un botón para agregar una fila de la tabla.

Cuando hago clic en el botón para agregar una fila de la tabla, se agrega al DOM correctamente. Sin embargo, el widget datepicker no se adjunta a los campos de fecha en esa nueva fila.

Sospecho que la respuesta es usar live() - o tal vez en() - para llamar a datepicker(), pero no entiendo qué sintaxis usar. El siguiente código ya está empujando los límites de mi comprensión de jQuery. Me duele la cabeza. ¿Ayuda?

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

Nota 2: He intentado esto también, con live() y on(). Parece funcionar tanto en los campos originales como en los insertados dinámicamente, pero esporádicamente (al menos en Chrome). Al igual, que va a trabajar durante tres segundos y luego se detiene durante tres segundos, y luego trabajar durante tres segundos y ...

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

Answer 1

Sólo volver a vincular el selector de fechas después de agregar una nueva fila. Si eso falla, pruebe el método de "actualización".

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