본문으로 건너뛰기
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

돔에 요소가 추가되는 걸 감지하는 이벤트 이름

요약: DOMNodeInsertedDOMNodeInsertedIntoDocument다. 전자는 요소에, 후자는 document에 들어오는 것만 감지.

그니까 이런 게 있는 거다. 동적으로 input을 불러와서 넣었는데 바로 datepicker를 실행하고 싶다!

이거를 datepicker 실행을 input 불러오는 함수에 명시하지 않고, 그냥 inputdatepicker라는 클래스만 붙어 있으면 원래 돔에 붙어 있었든 동적으로 불러온 든 간에 바로 datepicker를 실행해 주도록 하고 싶은 거다.

그런 데 사용하라고 나온 게 원래 .live() 함수고, 성능 문제 때문에 대체한 게 .on()이다. 아래처럼 쓰면 된다.

// 문서 로드 이후 추가되는 엘리먼트에 대해
$(".js-datepicker-container").on('DOMNodeInserted', '.datepicker', function(){
  $(this).datepicker();
});

핵심적으로 눈여겨 봐야 하는 것은 바로 DOMNodeInserted 이벤트 타입이다. 특정 돔에 언놈이 끼어들면 바로 감지해 주는 놈이다. 우리가 흔히 사용하는 이벤트 타입인 click과 동급이란 말이다. 물론 click처럼 jQuery가 함수화(.click() 같이) 해놓지는 않았다.

하나 더 알면 좋은데 DOMNodeInsertedIntoDocument라는 이벤트 타입은 아마 document에 뭔가 노드가 추가됐을 때 일어나는 이벤트 타입인 것 같다.

이상 참고글은 “DOMNodeInsertedIntoDocument event”다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

Leave a Reply

Your email address will not be published. Required fields are marked *