フォーム要素に動的にJQuery Datepickerを追加する

Question

私は、クローンメソッドを使用して、動的に入力を追加したフォームを作成しています。各入力には日付ピッカーが必要です。
各入力の名前は出力のために区別されます。

私はこのためにJquery UI Datepickerを使用しています。 （コンソールのメッセージ）が発生する問題「の$ cloned.find（...）。ATTR（...）が定義されていない」

私はjQuery DatePicker not working on newly added row
別のポストに行って、hasDatepickerを削除しようとしましたクラス（以下のコードに含まれています）が、問題は解決しません。
入力またはリソースをありがとう。

コードは以下である：

<table> 
<tr> 
<td name="a" class="FormLabel" width="100px"><strong>Class Year*</strong></td> 
<td width="100px"><input type="text" id="datepicker" name="ClassYear_1" class="usedatepicker" value="" tabindex="4" /></td> 
    </tr> 
    </table> 
    <button type="button" id="add-btn" name="add-btn">Add Class Year</button> 

JSコード：

function clone2(){ 
var $cloned = $('table tr:last').clone(); 
$cloned.removeClass('hasDatepicker').datepicker(); 
//console.log($(this)); 
//alert($(this).attr('name')); 
var oldIndex = $cloned.find('input').attr('name').match(/\d+/); 
var newIndex = parseInt(oldIndex,10)+1; 
$cloned.find('input').each(function(){ 
var newName = $(this).attr('name').replace(oldIndex, newIndex); 
$(this).attr('name', newName); 
}); 
$cloned.insertAfter('table tr:last'); 
} 

$('#add-btn').click(function() { 
clone2(); 
}); 


//attach datepicker - begin 
$(document).ready(function() { 

$(".usedatepicker").datepicker(); // or 
$(".usedatepicker").datepicker("refresh"); 

}); 

Answer 1

新しいテーブル行を挿入/クローニングした後、あなたは、まだ日付ピッカーで初期化されていない.usedatepickerクラスを使用して新しい要素を有します。

新しい行をで初期化してから、をDOMに追加しようとしています。 2つの問題。まず、入力フィールドだけでなく、（新しい）行全体に対してdatepickerを初期化しようとしています。次に、行をDOMに注入した後でこれを行う必要があります。

function clone2(){ 
    var $cloned = $('table tr:last').clone(); 
    $cloned.removeClass('hasDatepicker').datepicker(); 
    //console.log($(this)); 
    //alert($(this).attr('name')); 
    var oldIndex = $cloned.find('input').attr('name').match(/\d+/); 
    var newIndex = parseInt(oldIndex,10)+1; 
    $cloned.find('input').each(function(){ 
     var newName = $(this).attr('name').replace(oldIndex, newIndex); 
     $(this).attr('name', newName); 
    }); 
    $cloned.insertAfter('table tr:last'); 

    $(".usedatepicker").datepicker(); //<=== NEW 
} 

別のノート： あなたが値datepickerとIDを持っている

はこのような何かを試してみてください。行がクローンされると、同じIDを持つ複数の要素があります。いいえ。 IDをクラスに変更すると、すべて正常に動作します。クラスとIDの唯一の本質的な違いは、複数の要素に対して同じIDを使用できないことです。 簡単な解決策：クラスIDを切り替えます。

それはあなたがすでにname属性にやっているID属性に同じことを行う、ユニークなIDを経由して直接入力フィールドに対処する必要があるかもしれないので、十分ではない場合。