[jQuery]동적 태그에 이벤트 바인딩하기

​

$(document).on 과 $(document).ready 에 대해서 정리해보려고 합니다.

​

$(document).ready 가 무엇인가?

$(document).ready(function(){ // click 이벤트 - 예시

 })

 

보통 위와 같은 형식으로 많이 쓰인다.

이 코드를 풀어 말하자면, DOM이 준비가 됐을 때 click이벤트를 시작하겠다는 뜻으로 간주할 수 있다.

이거 외에도 $(window).load 와 같은 경우도 있습니다. 이 경우는 window에서 모든게 load된 시점을 뜻합니다.

​

문제는 동적으로 생성되는 엘리먼트들에 한해서는 해당 위에 적혀있는 내용부분이 반영되지 않는다는 것이다.

​

여기서 동적이란 말은 무엇을 뜻하는가?

- 보통 ajax를 통해 만들어지는 것들을 뜻한다. 기본으로 DOM이 생성된 후, JS를 통해서 새로 만들어지는 것들을 의미한다.

​

순서로 설명하자면 이렇다.

​

1. DOM이 불러져온다.

2. DOM이 준비된 상태에서 클릭 이벤트가 진행된다.

3. ajax를 통해 동적으로 DOM에 요소(=태그, 엘리먼트)가 추가 된다.

4. 동적으로 생성된 해당 요소에는 클릭 이벤트가 작용되지 않는다.

​

이렇게 되는 것이다. 동적요소가 없다면 $(document).ready를 써도 무방하리라 본다.

문제는 동적요소가 생성되었을때.

​

$(document).on 가 무엇인가?

1. $(document).on('셀렉터', function(){ // click 이벤트 - 예시 

}) 


2. 
$(document).on('셀렉터', 함수명); 
$(document).on('.ex', clickEvent); // 예시

위에서 말했던 것과 같이 문제는 동적요소가 생성 되었을때 기존의 이벤트를 어떻게 전달하느냐인데.

이 부분에서 $(document).ready를 쓰지 않고 위와 같은 형태로 쓰는 방법이 있다.

​

​

​

​

​

이 두가지 방법의 차이는

● $(document).ready

- ready의 경우는 해당 셀렉터에 이벤트를 직접 바인딩을 한다.

얘는 준비된 DOM이 전부인줄아는 순애보같은애다.

​

● $(document).on

- on의 경우는 이벤트를 위임하는 것을 뜻한다. 쉽게 생각하자면

위 요소부터 아래 요소까지 이벤트가 이어져 내려가기 때문에 새로 생긴요소에도 기존 부모가 이 이벤트를 가지고 있기에 그걸 넘겨줄 수 있다.

​

이렇게 해서 동적요소에도 해당 이벤트를 한번더 쓰지 않고도 불러낼 수 있다.

ajax를 쓰는 게시판과 같은 형태 에서 쓰기 좋을 것 같다.

​

​

​

※그리고 또 한가지 더 추가하는 방법은.

해당 요소에 바로 onclick과 같은 형태로 이벤트를 넣어주는 방식도 있다.

<button type="button" onclick="clickEvent();">클릭 버튼</button>

이렇게 위와 같은 형태로 작업을 해서 동적 요소로 불러올때 이벤트를 같이 불러오는 방법도 있다.

이건 개인의 취향과 같은 것 같다. 관리하기 어려울 수 도 있고..

 

 

EX)예시 -

 

체크 박스에 체크가 되거나, 체크가 해제될 때마다 이벤트가 발생하는 로직이 있었다. 보통 페이지를 최초로 로딩할때 해당 체크박스를 다 뿌려주니 아래와 같이 구현하여 쓰고 있었다.

 

$(document).ready(function(){

    $("input[name='optionCheck']").change(function(){

           //이벤트 바인딩

    });

});

 

그런데 체크박스를 동적으로 만들어주는 경우에는 위와 같은 태그가 먹지 않았다. 찾아보니 동적 태그일 경우에는 document.ready의 이벤트가 작동하지 않는다. document.ready 는 화면이 최초에 로드되었을 때에 화면 안에 있는 태그들에 이벤트를 걸기 때문에, 로드되었을 때 존재하지 않는 태그에 대해서는 이벤트를 걸 수 없는 것이다. 

 

이런 때엔 어떻게 이벤트를 거는 지 찾아보았더니 아래와 같은 방법이 있었다.

 

$(document).on("change","input[name='optionCheck']",function(){

    //이벤트 바인딩

});

 

그리고 더 찾아보았더니, on 에는 생각보다 많은 장점이 존재한다. 하나의 element 에 여러 개의 이벤트가 바인딩 될 때에도 아래와 같이 깔끔하게 jQuery 를 구현할 수 있다.

 

$("input[name='optionCheck]").on({

    "change" : function() {    //이벤트 바인딩    },

    "click" : function() {     //이벤트 바인딩     },

});

 

 

 

출처 : https://brunch.co.kr/@ourlove/98   

출처 : https://blog.naver.com/hsoojy_/221294300003