[JQuery] $(document).ready 와 $(document).on의 차이(Feat. $(document).ready가 동적 요소 제어하지 못할 경우)

 

 

 

 

 

 

 

 

 

 

 

$(document).ready

---

$(document).ready(function(){
	//이벤트
})

 

보통 위 코드와 같은 형식으로 사용됩니다.

  
$(document).ready는  DOM이 준비가 됐을 때 click이벤트를 시작하겠다는 의미입니다. 
문제는 동적으로 생성되는 엘리먼트들에 한해서는 $(document).ready가 동작되지 않을 수 있습니다.

 

그 이유는 이벤트 핸들러(event handler)를 엘리먼트에 직접 바인딩을 하기 때문입니다. 엘리먼트에 직접 바인딩을 하기 때문에 지금 존재하는 태그들만 영향을 받고 새로 동적으로 생성되는 엘리먼트 들은 영향을 받을 수 없습니다. 

 

 

동적이란?
보통 ajax를 통해 만들어지는 것을 말하며, 기존 DOM이 생성된 뒤 JS, JQuery를 통해서 새로 만들어지는 것들을 의미합니다.

 

 

아래와 같은 순서로 $(document).ready는 동적으로 생성되는 엘리먼트들에 한해서는 동작되지 않을 수 있습니다.

1. DOM(Document Object Model)이 불러져 온다. 
2. DOM이 준비된 상태에서 $(document).ready에 있는 이벤트가 진행된다.
3. ajax를 통해 동적으로 DOM에 요소(태그, 엘리먼트)가 추가된다.
4. 동적으로 생성된 해당 요소에는 이벤트가 작용되지 않는다.

 

 

즉, $(document).ready는 기본 DOM이 불러진 뒤 수행되는 코드라 추후에 동적으로 가져온 요소를 제어하기 위해선 $(document).on을 사용해야 합니다.

 

 

 

 

 

$(document).on

---

// 1번째 방법
$(document).on([셀렉터], function(){
	//이벤트
})

// 2번째 방법
$(document).on([셀렉터], 함수명);

 

$(document).ready가 동적으로 추가된 요소를 제어할 수 없기 때문에 $(document).on을 사용할 수 있습니다.

$(document).on를 이용하여 위와 같은 코드의 형태로 동적요소가 생성되었을 때 기존의 이벤트를 사용할 수 있습니다.

 

$(document).on의 경우 이벤트 핸들러(event handler)가 DOM트리 보다 위에 바인딩이 되어서 Selector와 일치하는 태그를 찾아 실행하게 됩니다.

 

대부분의 DOM 이벤트들이 Tree의 꼭대기에서 시작해서 나뭇가지처럼 아래로 퍼지기 때문에 이것이 가능한 것인데, 해당하는 id의 태그를 클릭하면 클릭이벤트가 발생할 때 모든 부모 태그들의 사이를 이동하는 클릭 이벤트가 생성되고 그 부모 태그들과 조상 태그들은 그 이벤트를 받을 수 있게 됩니다.  

 

즉, 우리가 알고 있는 DOM 트리보다 위에서 이벤트를 위임받아 실행하기 때문에 어떤 요소가 동적으로 생성되더라도 그 이벤트를 인식을 할 수 있습니다.