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.
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();
})
This will work for dynamically created elements and jQuery will manage the IDs properly.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments