Timepickr jQuery function not working
I'm trying to implement a timepickr element into my website, however it seems that the element will work ok 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, th开发者_如何学运维e contents of which come from an Ajax call made in the page.
This is the only jQuery item I have in the page. The page itelf only has this one timepickr reference.Id's need to be unique. when you reference
$('#timestart').timepickr();
it looks at the id of the element this is denoted by use of the '#' Therefore if you use the same id more than 1x per page, it should take the first one, but this is invalid markup if you use the same id for more than 1 element. to fix it
$('#timestart1').timepickr();
$('#timestart2').timepickr();
<input id='timestart1' type='text' value='09:00' />
<input id='timestart2' type='text' value='09:00' />
an id is an unique identifier, so it have to be unique you could use the class attribute instead
<script type="text/javascript">
$(function(){
$('.timestart')each(function(){
$(this).timepickr();
})
});
</script>
<input class='timestart' type='text' value='09:00' />
i've testet it (see code below) and it works. it seams the ajax cause the problem
<html>
<head>
<link title="theme" type="text/css" href="http://ui.jquery.com/applications/themeroller/css/jquery-ui-base.css.php?ctl=themeroller&=" media="screen" rel="Stylesheet" id="themeCSS" />
<link rel="Stylesheet" media="screen" href="css/jquery.utils.css" />
<link rel="Stylesheet" media="screen" href="css/ui.timepickr.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js" type="text/javascript"></script>
<script src="jquery.utils.js" type="text/javascript"></script>
<script src="ui.timepickr.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".timepickr").each(function(){
$(this).timepickr();
})
});
</script>
</head>
<body>
<input class='timepickr' type='text' value='09:00' />
<input class='timepickr' type='text' value='12:00' />
<input class='timepickr' type='text' value='07:00' />
</body>
</html>
加载中,请稍侯......
精彩评论