[Angular+jquery] - document.ready 먹통 이슈

1. 개요

퍼블리싱 업체로부터 jquery 소스를 받았는데,

분명 함께받은 html 웹페이지에서는 jquery가 작동 했으나,

정작 진행중인 프로젝트에 반영을 하니 적용되질 않았다.

$(document).ready(function(){
	$('.selectbox .active').click(function(){
    	//...Some codes...
	});
});

<문제의 그 소스>

 

 

2. 해결

그래서 무엇이 원인인지 찾아보니,

Angular의 기본적인 특성과, Life cycle에 관련이 있다는것을 깨달았다.

Angular는 SPA(Single Page Application)으로,

 

처음 웹 페이지를 켰을때 document가 ready되고,

이 시점에 바인딩 대상 DOM이 ("selectbox", "active") 가 존재하지 않고,

뒤늦게 뜨는 컴포넌트에 포함되어있다면, 이 이벤트가 정상적으로 바인딩 되지 않는 문제였다.

 

다음에 Angular의 생명주기에 대해 포스팅을 할 계획을 갖고,

 

아래는 해결 코드를 적어놓았다.

 

$(document).on("click", ".selectbox .active", function() {
	//...Some Codes...
});

 

document - on 구문으로 .selectbox .active에 click 이벤트 리스너 콜백함수를 걸어주니

정상 작동되게 되었다.