2011-08-16 11 views
0

動的に追加された入力ブロック(テーブルのセル内)がdatetimeピッカーを起動しない理由を理解しようとしています。この問題を示すコードの概念ブロックを提供しました。このコードをそのまま実行すると、デフォルト入力タグ(id:dti1)が完全に機能し、datetime pickerがポップアップし、ユーザーは日付と時刻を選択できます。ただし、「別のものを追加」をクリックすると、dtpickクラスが適切に関連付けられていると正しく表示されますが、datetimeピッカーは新しい入力要素にポップアップしません。私の前提は、datetime pickerはページのロード時に各dtpickクラス要素に関連付けられているため、datetime pickerが機能しないのはこのためです。動的に行を追加すると、強制的にそのようなことが起こるような方法はありますか?JavaScript/jQuery + datetime picker:動的に追加された入力にfire datetime pickerが表示されません。

<html> 
<head> 
<!-- includes: jquery, jquery_ui_datepicker, timepicker-- references removed here--> 
<script> 
    $(document).ready(function(){ 
    $('.dtpick').datetime({ 
    userLang : 'en', 
    americanMode: true}); 
    }); 
    function addItem() 
    { 
    var t = document.getElementById('myTable'); 
     var row = t.insertRow(-1); 
     var c1 = row.insertCell(0); 

     var c1content=document.createElement("input"); 
     c1content.setAttribute("type","text"); 
     c1content.setAttribute("name","dtnew"); 
     c1content.setAttribute("id","dtinew"); 
     c1content.setAttribute("class","dtpick"); 
     c1content.setAttribute("value","2011-08-20 01:00:00"); 

     c1.appendChild(c1content); 
    } 
</script> 
</head> 
<body> 
<table id="myTable"> 
<tr> 
    <td><b>Row Header:</b></td> 
</tr> 
<tr> 
    <td><input type="text" name="dt1" id="dti1" class="dtpick" value="2011-08-21 01:00:00"></td> 
</table><br> 
<a onclick="addItem()"> Add another</a> 
</body> 
</html> 

ご協力いただきまして誠にありがとうございます。あなたがアイテムを追加した後デビッド

答えて

1

は、あなたの日付ピッカーのウィジェットを再初期化する必要があります。つまり、次のようになります。

function addItem() 
{ 
    var t = document.getElementById('myTable'); 
    var row = t.insertRow(-1); 
    var c1 = row.insertCell(0); 

    var c1content=document.createElement("input"); 
    c1content.setAttribute("type","text"); 
    c1content.setAttribute("name","dtnew"); 
    c1content.setAttribute("id","dtinew"); 
    c1content.setAttribute("class","dtpick"); 
    c1content.setAttribute("value","2011-08-20 01:00:00"); 

    c1.appendChild(c1content); 

    $('.dtpick').datetime({ 
     userLang: 'en', 
     americanMode: true}); 
    }); 
} 
+0

優れています。これは完璧に機能しました。私の実際の実装では、実際に私が作成している各入力のユニット名/ ID値を生成しています。 dtpickクラスで多数の入力がある場合、 '$( '.dtpick')。datetime'と' $( '#uniqueID')の間にパフォーマンスの違いがありますか?datetime({? –

+0

クラスは一意のIDよりもエレガントなので、より良い方法ですが、他の人が私のところに来て修正するかもしれません。 –

関連する問題