jQuery UI的日期选择器未出现在动态输入上

Question

I inherited a bunch of code of varying quality and I'm fixing a bunch of things that has been wrong. One thing that it does is that is has a table of form inputs, one of which uses jquery-ui Datepicker. There is also a button that creates a new row at the bottom of the table. The new row's Datepicker never shows up.

I've seen this problem listed a few times here on SO but none of those solutions worked. I'm putting up what I have now. My jfiddle is at:

http://jsfiddle.net/squarepegsys/G8WEC/2/

The meat of my code is here:

tr.find(".datepicker").on("focusin",function() {
    console.log("got focus");
    $(this).datepicker();

}); 

In the on("focusin"...) line, I see "got focus" on the console but never see the datepicker show up.

Answer 1

When you create the datepicker instance, jQuery assigns it an ID, and when you clone it, you're duplicating it. Instead, create the datepicker instance dynamically via:

$(document).on('focus', ".datepicker", function () {
    $(this).datepicker( "destroy" ).datepicker();
})

jsFiddle example

This will work for dynamically created elements and jQuery will manage the IDs properly.