0

Web サイトに timepickr 要素を実装しようとしていますが、この要素はページのあるセクションでは正常に機能するようですが、別のセクションでは機能しないようです。
適切な css ファイルを参照します…</p> 

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

jQuery ファイルと同様に…</p> 

<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 関数を記述しています…</p> 

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

次に、ページの本体で、timepickr 関数を参照してオブジェクトを作成します…</p> 

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

それは正常に動作します。ただし、後で同じページでまったく同じコードを使用すると、timepickr 機能が作動しません。

機能を動作させたい領域は別の DIV セクションにあり、その内容はページで行われた Ajax 呼び出しから取得されます。
これは、ページにある唯一の jQuery アイテムです。
ページ itelf には、この timepickr 参照が 1 つだけあります。

4

2 に答える 2

0

ID は一意である必要があります。参照するとき

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

要素の ID を調べます。これは「#」を使用して示されます。したがって、同じ ID をページごとに 1 回以上使用する場合は、最初の ID を取得する必要がありますが、同じ ID を使用する場合、これは無効なマークアップです。 1 つ以上の要素。それを修正する

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

<input id='timestart1' type='text' value='09:00' />
<input id='timestart2' type='text' value='09:00' />
于 2010-07-26T15:04:16.770 に答える
0

id は一意の識別子であるため、一意である必要があります。代わりに class 属性を使用できます

<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>
于 2010-07-26T15:07:46.463 に答える