Adding datepicker to dynamically created input field
I've read a few posts here about this, but I'm still having a
problem. It works fine if I hard code the page to load with an input
field. But when I dynamically add a field it doesn't show up when I
click the field. The hasDatepicker tag has been added to the class,
but still nothing. I even tried calling datepicker for each field at
the end of the function that creates each new field, still nothing.
Anyone else experiencing this?
<script type="text/javascript">
$(document).ready(function(){
$(".datepicker").datepicker();
$("#checkbox").validate();
});
function AddNewUpload(){
var jFilesContainer = $( "#parts" );
var jUploadTemplate = $( "#element-templates div.period_field" );
var jUpload = jUploadTemplate.clone();
var strNewHTML = jUpload.html();
var intNewFileCount = (jFilesContainer.find
( "div.period_field" ).length + 1);
jUpload.attr( "id", ("file" + intNewFileCount) );
strNewHTML = strNewHTML
.replace(
new RegExp( "::FIELD2::", "i" ),
intNewFileCount
)
.replace(
new RegExp( "::FIELD3::", "i" ),
intNewFileCount
)
.replace(
new RegExp( "::FIELD4::", "i" ),
("parts[]")
)
.replace(
new RegExp( "::FIELD5::", "i" ),
("period_start[]")
)
.replace(
new RegExp( "::FIELD6::", "i" ),
("period_end[]")
)
;
jUpload.html( strNewHTML );
jFilesContainer.append( jUpload );
$("#file" + intNewFileCount).fadeIn("slow");
$("#period" + intNewFileCount).datepicker();
}
</script>