jQuery UI datepickers가있는 복사 된 html 요소의 Datepicker

Question

사용자가 필요에 따라 동적으로 필드 세트를 추가 할 수있는 양식이 있습니다.

이

$("#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 및 실행하는 발견 단지 기능입니다 : 그 단지 사본의 마지막 항목과의 코드는 코드는 다음 (내 질문 here 주위에 작업) 필드 이름에 카운터를 증가 해당 필드에 날짜 선택 도구를 추가하는 jQuery UI datepicker() 함수 내가 겪고있는 문제는 이것이다. 첫 번째 필드에서는 datepicker가 제대로 작동하지만 동적으로 추가되면 datepicker가 새 필드에 대해 팝업되지 않습니다.

로깅 문을 사용하여 코드 실행을 추적하여 datepicker() 함수가 추가 된 후에 호출되고 모든 기능이 작동하는지 확인했습니다. 내 datepicker() 코드

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

왜 이것이 예상대로 작동하지 않는지 알고 있습니까?

Answer 1

내 생각에 복제품과 관련이 있습니다. 동적으로 추가 된 요소에 대해 라이브 데이트 피커 활성화를 통해이를 수행 할 수 있다는 것을 알고 있습니다. 시도해보십시오 this jsfiddle.

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