[jQuery] Ajax 사용 후 동적 생성(append)된 엘리먼트에 이벤트가 작동하지 않을 때

Ajax를 사용해 데이터에 따라 동적으로 테이블을 생성하거나

동적으로 button을 생성하는 경우가 많을 것이다.

 

이렇게 동적으로 생성된 button에 클릭 이벤트를 줄때, 일반적인 방법으로는 작동하지 않을것이다! 

 

button에 클릭이벤트를 주는 일반적인 방법으로 이렇게 했을 것이다.

// 동적으로 생성된 저장버튼 클릭시
$('#saveBtn').click(function() {
	alert("동작하겠지?");
    // 안한다.
});

 

 

왜 동작하지 않을까?

 

이유는 아직 존재하지 않는 요소에 대해 이벤트를 주려했기 때문이다.

The problem is that .click only works for elements already on the page. 

( 문제는 .click이 페이지에 이미 있는 요소에 대해서만 작동한다는 것입니다.

 

즉, 동적 태그일 경우에는 document.ready이 이벤트는 작동하지 않는다.

document.ready는 화면이 최초로 로드되었을 때 기준, 화면 안에 있는 태그들에 이벤트를 걸기 때문이다.

따라서 로드되었을때 존재하지 않는 태그에 대해서는 이벤트를 걸 수 없다.

 

 

그러면 어떻게 사용해야할까?

<해결방법 ① : $(변하지않는요소).on(click, 변하지않는요소안의 변하는요소, function..)  의 형태

 - 변하지않는 상위요소에 이벤트를 걸어주는 방식 사용>

 

예시 1

// 1. 동적으로 생성되지 않은 #btnGroup이라는 div 태그에 이벤트를 주거나
$('#btnGroup').on("click","#saveBtn", function(){
	alert("동작한다");
});
 

예시 2

// 2. document에 이벤트를 위임하면 동작한다.
$('documnet').on("click","#saveBtn", function(){
	alert("동작한다");
});

 

예시 2번보다는 예시1번이 전체 문서 요소 트리를 검사해야 하는 범위가 줄어들어 효율성이 향상된대.

몰라 확실하진 않아 더 알아봐야됨

 

 

예시 1, 2 에대한 해설

When you use $('#saveBtn').click() to register an event handler it adds the handler to only those elements which exists in the dom when the code was executed
you need to use delegation based event handlers 

( $('#saveBtn').을() 클릭하여 이벤트 핸들러를 등록하면 코드가 실행될 때 도메인에 존재하는 요소에만 핸들러를 추가합니다. 따라서, 위임 기반 이벤트 핸들러를 사용해야 합니다. )

 

 

 

<해결방법 ② : on 사용하기>

it works using $(document) instead of element itself, then declaring element in the .on() parameters! 
요소 자체 대신 $(document)를 사용하여 .on 매개 변수에 요소를 선언하면 된다.

 

예시 1 input box

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

    // 이벤트 바인딩

    getList();

});

 

예시 2 select box

$(document).on("change","select[name=achieveYear]", function() {
    // 이벤트 바인딩
    alert("yearSelect!");
});

 

 

 

 

on 의 장점 : 하나의 element에 여러개의 이벤트 바인딩 가능

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

    "change" : function() { // 변경 감지시 발생시킬 이벤트 바인딩 } ,

    "click" : function() { // 클릭시 발생시킬 이벤트 바인딩 }

});

 

 

 

 

이해한대로 정리하자면..

 

"클릭 이벤트를 실행하라!" 면서 이벤트를 정의하는 시점에서는, 내가 동적으로 생성한 button이 존재하지 않기 때문에 동작하지 않는다. 그래서 이벤트 위임이 필요한것이다. 

 

-- 이런느낌 -- 

1. 브라우저에서 html문서 생성

 

2. 제이쿼리에서 버튼에 이벤트 추가!

하지만, append한 버튼이 아직 존재 하지 않는걸요 :(

 

3. append 로 버튼추가

이제서야 버튼 생성! 

-----------------