동적생성된 table input에 datepicker 적용하는 방법
본문
클릭이벤트로 동적으로 생성된 input에 datepicek가 적용이 되지 않는
문제가 발생하여 글을 올리게 되었습니다.
구글링을 통해 동적으로 생성된 html에 datepicker를 적용하는 찾아
테스트 해보았는데
row 1개만 생성 후 datepicker 컬럼을 클릭하면 달력이 잘 출력이 되는데
여러줄을 생성 후 2번째row, 3번째 row의 datepicker 컬럼을 클릭하면
포커스가 가장 맨윗줄 row의 datepicker에 포커스가 잡히면 날짜를 클릭하면
맨 윗줄 row에만 데이터가 들어갑니다.
어떤 부분을 수정해야 각 row datepicker 컬럼마다 달력 데이터가 들어갈수 있게 할수 있을까요?
$(아이디).click(function(e){
e.preventDefault();
$(".table .r:last").clone(true);
$(".table .r:last").after(new_tr);
$(".table .date-picker").datepicker();
});
<table class="table">
<tr class ="r">
<th><input type="text" name="test"></th>-row1
<th><input type="text" name="test"></th> -row2
</tr>
답변 1
datepicker를 적용할 input에 class="datepicker" 추가
동적으로 생성된 input에서도 아래처럼 datepicker 실행할 수 있습니다.
$(document).on("click", ".datepicker", function () {
$(this).datepicker().datepicker("show");
});
------------