Small Asteroid Blog

[jquery] 동적 객체 추가 후 datepicker() 사용하기 본문

프론트엔드/Javascript

[jquery] 동적 객체 추가 후 datepicker() 사용하기

작은소행성☄️ 2021. 4. 14. 16:38
728x90

 

jQuery 라이브러리 사용중 datepicker()를 사용할 때

 

동적으로 추가된 요소에는 datepicker()가 적용되지 않는다.

 

 

 

datepicker 선언

<head>
    <meta charset="UTF-8">
    <title>datepicker</title>
    <!-- Jquery ui css 파일-->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
</head>

 

 

<script type="text/javascript">

//id가 datepicker일 때
function datepick(){
	$("#datepicker").datepicker({
	});      
    
}
</script>

 

 

 

hasDatepicker class의 문제로 해당 클래스를 제거 후 다시 datepicker를 설정하면 작동이 된다.

 

 

//동적 생성된 요소에 datepicker 사용하기
$(document).find(".datepick").removeClass('hasDatepicker').datepicker();

 

 

 

 

 

 

728x90
반응형

'프론트엔드 > Javascript' 카테고리의 다른 글

datepicker 동적 추가 시 생기는 에러  (0) 2021.04.15
form 데이터 전송 / 동적 생성된 객체도 form 으로 전송  (0) 2021.04.15
jQuery를 사용하여 동적 테이블의 특정 행(tr,td)을 삭제하는 방법 (동적으로 행 삭제)  (2) 2021.04.14
[url 인코딩/ 디코딩] encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()  (0) 2021.04.13
jquery string 으로 url 넘길 때 특수문자 사라지는 현상 해결(encodeURICpmponent)  (0) 2021.04.12
'프론트엔드/Javascript' Related Articles more