I trying to implement a timepickr element into my website, however it seems that the element will work fine in one section of a page, but not in another.
I reference the appropriate css files…
<link rel="Stylesheet" media="screen" href="ui.timepickr.css" />
<link rel="stylesheet" media="screen" href="jquery.timepickr.css" type="text/css" />
As well as the jQuery files…
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/jquery.timepickr.js"></script>
The route of these files are correct. I have the jQuery function written in the head of the page…
<script type="text/javascript">
$(function(){
$('#timestart').timepickr();
});
</script>
And then, in the main body of the page, I create the object, referencing the timepickr function…
<input id='timestart' type='text' value='09:00' />
It works fine. However, when I use this exact same code later on in the same page, the timepickr functionality does not kick in. The area where I want the functionality to work is in another DIV section, the contents of which come from an Ajax call made in the page. This is the only jQuery item I have in the page.