최근 포토로그


동적으로 추가된 요소에 datepicker() 사용하는 방법 jQuery

jQuery 라이브러리 사용중 datepicker()를 사용할 일이 많다
하지만 datepicker()는 동적으로 추가된 요소에 적용되지 않는다.

이전 프로젝트에서 이런 문제로 인해 구글링을 열심히 해보았지만 결국 해결책을 못찾아
자바스크립트로 만들어진 팝업 달력을 이용하여 해결할 수 밖에 없었다.

이번 프로젝트에서도 똑같은 문제가 발생했다.
그냥 저번처럼 팝업달력을 사용하여 해결할까 고민을 하였다.

하지만 팝업달력은 디자인이 별루여서 사용하기가 꺼려져 문제를 해결하기 위해 열심히 구글링을 하였다.
결국 해결책을 찾았다.

첫번째 해결책으로
$("input[name=cAcqDate]").removeClass('hasDatepicker').datepicker();     
위와 같은 코드를 써 보았으나 문제가 있었다. 2개까지의 로우생성후 달력 적용이 되었으나
그 이상의 로우에서는 달력이 생성되나 값이 들어가지 않는 문제가 발생하였다.

두번째 해결책으로
$(document).find("input[name=cAcqDate]").removeClass('hasDatepicker').datepicker();     
위와 같은 코드를 넣어 보니 모든 문제가 해결되었다.


나와 같은 고민을 하는 모든 개발자에게 도움이 되었으면 한다.

아래 함수는 동적 추가요소에 달력함수 적용한 예이다.

function addRow(v) {
  if (v == 'C') {
   // html tag 추가시 td와 /td를 따로 추가하면 그려지지 않는 문제 있음.
   $("#cTbody").append("<tr>")
     .append("<td align='center'><input type='checkbox' name='Cchk' value='' /></td>")
     .append("<td><input type='text' name='cAcqDate' value='' /></td>")
     .append("<td>&nbsp;</td>")
     .append("<td><input type='text' name='certificateNm' /></td>")
     .append("</tr>");
   //동적추가 요소에 달력 호출 하기
   $(document).find("input[name=cAcqDate]").removeClass('hasDatepicker').datepicker();     
  } else {
   $("#lTbody").append("<tr>")
      .append("<td align='center'><input type='checkbox' name='Lchk' value='' /></td>")
      .append("<td><input type='text' name='lAcqDate' value='' /></td>")
      .append("<td>&nbsp;</td>")
      .append("<td><input type='text' name='labguageNm' /></td>")
      .append("<td>&nbsp;</td>")
      .append("<td><input type='text' name='score' /></td>")
      .append("</tr>");
   //동적추가 요소에 달력 호출 하기
   $(document).find("input[name=lAcqDate]").removeClass('hasDatepicker').datepicker();

  }

 }


덧글

  • 간디작살 2012/06/27 17:00 # 삭제 답글

    동적으로 생성된 HTML에 datepicker()가 동작하지 않아 애먹고 있었는데..
    한방에 해결되네요.
    좋은 정보 감사합니다 ^^
  • 마사 2013/05/08 18:28 # 삭제 답글

    오오 저도 datepicker()가 안먹어서 해메고 있었습니다.
    좋은 정보 감사합니다.
    퍼갈게요!
  • 나그네 2013/07/19 12:19 # 삭제 답글

    애먹을 뻔했는데 좋으 정보감사요
    그런데 동적 생성 Row에서 선택한 날짜가 무조쩐 첫번째 Row에 세팅 되는 현상이 발생하네요..
  • 나그네 2013/07/19 12:32 # 삭제

    ID도 체크하나 보네요.. 동적생성할때 ID 에 넘버링 추가하니까 잘 되네요..
  • 키찌 2014/02/18 18:31 # 삭제

    아 진짜 감사합니다 ㅠㅠ

    하루 날릴뻔했어요
  • 모리안 2014/05/12 13:39 # 삭제

    혹시 이 내용에 대해 소스 좀 알려주실 수 있을까요??

    input box랑 그 옆에 달력이미지 둘다 클릭 가능하게 설정해놨는데
    input box는 정상적으로 해당 row를 선택하고, 달력이미지는 첫번째 row를 강제로 선택하네요. ㅠㅠ

    저도 ID에 넘버링은 적용했거든요 ㅜ.ㅜ
  • 초짜 2017/03/21 21:07 # 삭제

    id도 클레스처럼 지우니까 돌아가네요 .attr("id","")
  • 바들 2013/08/27 17:11 # 삭제 답글

    감사합니다.
  • js 2013/09/17 11:29 # 삭제 답글

    좋은 정보 감사합니다.
  • 정말 감사합니다. 2013/10/11 16:38 # 삭제 답글

    몇시간동안 헤맸는데 덕분에 해결했네요^^
    늘 기분좋은 일이 항상 함께 하시길~
  • uhoons 2013/11/06 12:10 # 삭제 답글

    좋은 정보 감사합니다.
  • help 2013/12/18 17:47 # 삭제 답글

    필요한 내용같은데 이해가 안된다니.. ㅠㅠ
  • 바람~~ 2014/07/23 10:04 # 삭제 답글

    정말 감사합니다! 덕분에 한방에 해결 했습니다!
  • 쏜넬 2015/01/08 18:10 # 삭제 답글

    많은 도움이 되었습니다.^^ 감사합니다.
  • 잔진 2016/07/22 19:02 # 삭제 답글

    이거땜에 저도 많이 고생했는데 감사합니다 ^^
  • 21 2018/10/17 15:21 # 삭제 답글

    기가막힙니다. 정말정말정말 감사합니다.
댓글 입력 영역