제이쿼리 동적 요소 이벤트 바인딩

jQuery 를 사용하면 상당히 편한 부분이 많습니다.

오늘은 동적인 element에 이벤트를 바인딩하는 방법에 대해서 알아보겠습니다.

 

사실 jQuery에서 동적 요소에 이벤트를 주는 것은 어렵지 않습니다.

 

javascript를 예로 들면, 이벤트가 바인딩 되어있던 요소가 화면이 로딩 된 이후에 동적으로 추가 생성된다고 하면, elements를 추가하는 기능 이후에 또 이벤트를 바인딩해주어야 하는 번거로움이 있었습니다.

 

그러나 jQuery는 이러한 반복적인 코드처리를 해주지 않아도 알아서 이벤트를 붙여줍니다.

 

직접 코드로 보겠습니다.

 

jquery 로 이벤트 바인딩하는게 뭐가 어렵다고 이런 포스팅을 하나 싶은 분들도 계실텐데요.

넘기지 마시고 잘 보셔야 합니다~!

$('li').on('click', function(){
	//실행 코드
});

$('li').click(function(){
	//실행 코드
});

위에 예로 보여준 코드가 아마 처음 jQuery를 접하신 분들이 많이 사용하시는 방법일텐데요.

저렇게 element에 직접 이벤트를 줄 경우 해당 요소가 동적으로 추가 생성 되었을 때 이벤트가 붙어있지 않습니다.

 

그래서 javascript를 사용할 때 처럼 element를 추가하고 또다시 이벤트를 바인딩해주어야 하는 것이지요.

 

그러나 아래와 같이 이벤트를 주면 그러지 않아도 된다는 것입니다.

$('ul').on('click','li', function(){
	//실행 코드
});

이벤트를 줄 요소의 상위 element를 대상으로 하여 Click이벤트를 바인딩 하지만, 그 하위 요소인 li에 click이벤트를 지정해주는 겁니다. 여기서 li가 계속 동적으로 추가 된다고 하더라도 이미 ul은 계속 존재하는 상황이기 때문에 이벤트가 계속 살아있는 것입니다.

 

처음 스크립트를 시작할 때 간과할 수 있는 부분이지만, 나중에는 결국 마지막 방법으로 사용하게 될 부분이기 때문에 조금 코드가 길어보인다 하더라도 마지막 방법을 사용해주시는게 좋습니다.

 

한 가지 의문이 생길 수 있는 부분은

ul이나 div 같은 부모 요소가 없는 경우에는 어떻게 이벤트를 주느냐는 문제인데요

 

그것은 아래와 같이

$('document').on('click', 'div', function(){
	//실행 코드
});

 document를 대상으로 on이벤트를 주시면 됩니다.

 

그럼 오랜만에 돌아온 웹퍼블리싱 강좌 끝~