2010-07-26 6 views
0

J'essaie d'implémenter un élément timepickr dans mon site Web, mais il semble que l'élément fonctionnera correctement dans une section d'une page, mais pas dans une autre.
Je référencent les fichiers appropriés ... cssTimepickr La fonction jQuery ne fonctionne pas

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

Outre les fichiers 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> 

L'itinéraire de ces fichiers sont corrects. J'ai la fonction jQuery écrit dans la tête de la page ...

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

Et puis, dans le corps principal de la page, je crée l'objet, faisant référence à la fonction timepickr ...

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

Il fonctionne bien. Cependant, lorsque j'utilise exactement ce même code plus tard dans la même page, la fonctionnalité timepickr ne fonctionne pas.

La zone où je veux que la fonctionnalité fonctionne est dans une autre section DIV, dont le contenu provient d'un Ajax appel fait dans la page.
C'est le seul élément jQuery que j'ai dans la page.
La page elle-même contient seulement une référence timepickr.

+0

Merci pour les réponses, j'ai implémenté la réponse suggérée par Maggie, cependant ce contrôle ne fonctionne toujours pas; et sur la page, je n'utilise qu'un seul contrôle timepicker. Le contrôle timepickr est appelé dans une fonction ajax dans une fonction ajax. Cela pourrait-il me poser un problème? Merci. – Michael

Répondre

0

Les ID doivent être uniques. lorsque vous faites référence à

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

il regarde l'id de l'élément ceci est signalé par l'emploi de la « # » Par conséquent, si vous utilisez le même identifiant plus de 1 fois par page, il devrait prendre le premier, mais est un balisage invalide si vous utilisez le même identifiant pour plus d'un élément. pour le fixer

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

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

un id est un unique, identifiant, donc il faut être unique, vous pouvez utiliser l'attribut de classe au lieu

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

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

je l'ai Testet (voir le code ci-dessous) et il fonctionne. il corrige l'ajax cause le problème

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