Функция TimePickr JQuery не работает - PullRequest
Новая
       7

Функция TimePickr JQuery не работает

0 голосов
/ 26 июля 2010

Я пытаюсь внедрить элемент timepickr на свой веб-сайт, однако кажется, что этот элемент будет нормально работать в одном разделе страницы, но не в другом.
Я ссылаюсь на соответствующие файлы CSS ... 

<link rel="Stylesheet" media="screen" href="ui.timepickr.css" /> 
<link rel="stylesheet" media="screen" href="jquery.timepickr.css" type="text/css" />

Как и файлы jQuery… 

<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>

Маршрут этих файлов правильный.У меня есть функция jQuery, написанная в заголовке страницы… 

<script type="text/javascript"> 
 $(function(){
 $('#timestart').timepickr();
 });
</script>

И затем, в основной части страницы, я создаю объект, ссылаясь на функцию timepickr… 

<input id='timestart' type='text' value='09:00' />

Работает нормально.Однако, когда я использую этот же код позже на той же странице, функция timepickr не срабатывает.

Область, где я хочу, чтобы эта функция работала, находится в другом разделе DIV, содержимое которого приводитсяиз вызова Ajax, сделанного на странице.
Это единственный элемент jQuery, который у меня есть на странице.
У этой страницы есть только одна ссылка на указатель времени.

Ответы [ 2 ]

0 голосов
/ 26 июля 2010

идентификатор является уникальным идентификатором, поэтому он должен быть уникальным вы можете использовать атрибут класса вместо 

<script type="text/javascript"> 
 $(function(){
    $('.timestart')each(function(){
        $(this).timepickr();
     })
 });
</script>

<input class='timestart' type='text' value='09:00' />

Я тестировал его (см. Код ниже), и он работает. это швы ajax вызывают проблему 

<html>
<head>
<link title="theme" type="text/css" href="http://ui.jquery.com/applications/themeroller/css/jquery-ui-base.css.php?ctl=themeroller&amp;=" 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>
0 голосов
/ 26 июля 2010

Идентификаторы должны быть уникальными. когда вы ссылаетесь 

 $('#timestart').timepickr();

он смотрит на идентификатор элемента, который обозначается с помощью «#». Поэтому, если вы используете один и тот же идентификатор более 1 раза на страницу, он должен взять первый, но это недопустимая разметка, если вы используете один и тот же идентификатор для более чем 1 элемента. чтобы исправить это 

 $('#timestart1').timepickr();
 $('#timestart2').timepickr();

<input id='timestart1' type='text' value='09:00' />
<input id='timestart2' type='text' value='09:00' />
...