동적으로 추가 된 요소에 대해 jQuery 플러그인이 작동하지 않습니다.

Question

동적으로 추가 된 요소에 대해 jQuery 플러그인이 작동하도록하려면 어떻게해야합니까? 추가 버튼을 클릭 할 때마다 DIV datesList에 날짜 선택 도구를 몇 개 추가하려고합니다. 플러그인은 동적으로 추가 된 텍스트 상자에 대해 작동하지 않습니다. 조언을 구할 수 있습니까?

은과 같이

HTML

<div class="datesList"> 
    <div class="date"> 
     <input type="text" class="date-picker"/> 
    </div> 
</div> 

<div class="addDate"> 
    Add Date 
</div> 

JS에게 (에

$(".date-picker").datepicker(); 

$(".addDate").click(function(){ 
    var dList = $(".datesList"); 
    dList.find(".date").first().clone(false).appendTo(dList); 
}); 

Answer 1

사용 JQuery와) http://api.jquery.com/on/를 감사 :

$(document).on('click', '.addDate', function() { 
    YOUR FUNCTION 
}); 

$ (document) 대신에 더 나은 성능을 얻으려면 처음으로로드되는 가장 가까운 DOM 요소를 사용하십시오.

Answer 2

이것이 jQuery UI datepicker 인 경우 각 업데이트 후에 .datepicker('refresh')으로 간단히 호출 할 수 있습니다.

Answer 3

당신이 할 수있을하시기 바랍니다 것,이 작품이

$(".date-picker").datepicker(); 

$(".addDate").click(function(){ 
    var dList = $(".datesList"); 
    dList.find(".date").first().clone(false).appendTo(dList); 
    $(".date-picker").datepicker(); 
}); 

Answer 4

을 시도하지만, 미안 친구가 일을 나던 내가 그것을했다

$(".date-picker").datepicker(); 

$(document).on('click', '.addDate', function() { 
    var dList = $(".datesList"); 
    var newinput = $('<input type="text" />').attr('class', 'date-picker'); 
    dList.append(newinput); 
    var newdatepickr = $(".date-picker").datepicker(); 
});​ 

http://jsfiddle.net/2pFAd/