動的に追加された入力ブロック(テーブルのセル内)が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>
ご協力いただきまして誠にありがとうございます。あなたがアイテムを追加した後デビッド
優れています。これは完璧に機能しました。私の実際の実装では、実際に私が作成している各入力のユニット名/ ID値を生成しています。 dtpickクラスで多数の入力がある場合、 '$( '.dtpick')。datetime'と' $( '#uniqueID')の間にパフォーマンスの違いがありますか?datetime({? –
クラスは一意のIDよりもエレガントなので、より良い方法ですが、他の人が私のところに来て修正するかもしれません。 –