innerHTML 형식으로 jqueryui의 datepicker가적용된 input tag를 갱신시키고 있는데 datepicker가 잘안되네요.

Question

안녕하세요.innerHTML 형식으로 jqueryui의 datepicker가적용된 input tag를 갱신시키고 있는데 datepicker가 잘안되네요. 해당태그가 들어있는 파일을 아래과 같은 방식으로 특정 id 태그에 덮어 쒸우고 있습니다. function innerHTML() { $.ajax({ type : "post" ,dataType : "html" ,url : "datepickerHTML.html" ,success : function(htmlContent) { $("#container").html(htmlContent); } ,error : function(){ } }); } datepickerHTML.html 파일에는 아래와 같이 되어있구요....

위의 html 파일을 innerHTML 방식으로 특정 div에 계속적으로 덮어쒸우는데 처음에는 datepicer가 잘 적용되다가 두번쨰로 위의 ajax를 실행하면 datepicker가 뜨지를 않습니다. 특정 script 오류도 발생하지 않고 그냥 먹통이 되는데요.. 두번째 불러들였을때에는 혹시나 datepicker가 bind된지 알아볼 방법도 없고 어떻게 하면 계속 잘 뜨게 해야하는지도 잘 모르겟네요.... 위에 js와 css를 import 하는 부분을 호출하는 가장 상위 파일에 선언해도 마찬가지로 두번째에는 뜨지를 않습니다. 항상 새로고침을 해서 다시 불러와야지 달력이 나오는데요.. 혹시 계속 달력이 나오게 하는 방법아시면 답변부탁드립니다.

캬라멜보이 · Answer

동적생성으로 바뀐 소스에는 이전에 걸어두었던 이벤트가 먹지 않습니다. .datepicker 에 클릭 이벤트를 걸어두었는데 그놈이 사리지고 다른 .datepicker가 생겼습니다. 당연히 클릭이벤트가 안걸려 있죠.해결방법으로는 ajax 이후 클릭이벤트를 한번 더 걸어야 겟죠? 여기서는 datepicker 이벤트를 해야 겠네요.다른해결방법으로는 delegate를 사용하는 것이죠. delegate는 이후에 동적생성되는 것에도 event를 걸어주죠. 보통 on 함수를 많이 사용하는 delegate와 on 함수는 찾아보시구요 간단하게 해답만 알려드리겠습니다$(&#34;body&#34;).delegate(&#34;.datepicker&#34;, &#34;datepicker&#34;, function(){// body영역안에 있는 datepicker 클래스에 datepicker 이벤트를 연결 한다라는 의미});// 허허 가운데 datepicker가 eventtype인데 datepicker 연결도 이케 하는건지 모르겠네요. ㅋㅋ

innerHTML 형식으로 jqueryui의 datepicker가적용된 input tag를 갱신시키고 있는데 datepicker가 잘안되네요.

1개의 답변

Q&A 목록