jQuery UI datepickersを持つコピーされたhtml要素のDatepicker

Question

私はユーザーが必要に応じて動的にフィールドセットを追加できるフォームを用意しています。それだけでコピー最後のエントリのためのコードとフィールド名（私の質問hereための回避策）でカウンタをインクリメントコードは、次のとおりです。

$("#addBeneficiary").click(function(e) { 
    e.preventDefault(); 
    var beneficiary = $(".beneficiary:last").clone(); 
    var count = parseInt(beneficiary.find("input:first").attr("id").match(/\d+/), 10); 
    beneficiary.find("input").each(function(indx, element) { 
     var name = $(element).attr('name').replace(count, count+1), 
      id = $(element).attr('id').replace(count, count+1); 
     $(element).attr('name', name); 
     $(element).attr('id', id); 
     $(element).val(''); 
    }); 

    $("#beneficiaries").append(beneficiary); 
    datepicker(); 
}); 

を最後の行datepicker();はすべてinput.datepickerと実行を見つけるだけの機能ですjQuery UI datepicker()は、これらのフィールドに日付選択ツールを追加します。実行している問題はこれです。最初のフィールドでdatepickerは正常に動作しますが、動的に追加されたときにdatepickerは新しいフィールドにポップアップしません。

私は、datepicker()関数がappendの後に呼び出され、すべてが動作することを保証するために、ロギングステートメントでコード実行をトレースしました。ここに私のdatepicker()コード

var datepicker = function() { 
    $("input.datepicker").datepicker(); 
}; 

誰もが期待どおりに動作していない理由は知っていますか？

Answer 1

私の推測では、クローンと関係があります。私はあなたが動的に追加された要素のためのライブのdatepicker活性化でこれを達成できることを知っています。試しにthis jsfiddleを試してみてください。

$("input.datepicker").live('focus', function(){ 
    var $this = $(this); 
    if(!$this.data('datepicker')) $this.datepicker(); 
});