[jQuery]동적 생성(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) 

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

[주의] #saveBtn 은 미리 html소스로 생성한 btnGroup 하위에(안에) 위치해야 한다.

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

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이 존재하지 않기 때문에 동작하지 않는다. 그래서 이벤트 위임이 필요한것이다. 

 

 

++ 추가

만약, jQuery 오류가 발생한다면 실행중인 console 에서 사용중인 jQuery 의 버전을 확인해보세요.

console.log($.fn && $.fn.jquery); // jQuery 버전 출력

오류 : Uncaught TypeError: $(...).on is not a function

 

✅ 해결 방법 1: jQuery 버전 업그레이드 (추천)

jQuery 1.7 이상을 사용하면 on() 메서드를 사용할 수 있다.

저같은 경우 설마설마 했는데 jQuery 버전이 1.6.4 여서 뭔 짓을 해도 안됐음. 개빡침 ㅜ 뻘짓

jQuery 다운로드 받아서 파일을 교체하거나, 소스파일 내 jQuery 버전을 바꿔서 명시해주니 바로 됐음........ 대신 기존에 동작하던 소스가 호환이 안될 수 있으니, 버전은 잘 찾아서 매칭 시켜야 합니다.

 

버전 업그레이드에 관해 잘 작성된 블로그가 있어서 출처 남깁니다.

저는 ... Admin 화면이기도 하고 업그레이드 했더니 jQuery 다터져서 그냥 동적으로 구성 안해버렸어요..^^..

https://hane-1.tistory.com/35

[jQuery] 다운로드 및 적용 방법

 

 

하지만 버전에도 이상이 없다면 변수 및 이벤트 리스너에 '오타' 가 없는지 꼼꼼히 확인해봐야 합니다..

 

 

확인해야 할 사항

1. jQuery가 정상적으로 로드되었는지 확인

(1) jQuery가 실제로 로드되었는지 콘솔에서 확인

개발자 도구(F12)에서 Console(콘솔) 탭을 열고 아래 명령을 입력

console.log(typeof jQuery); console.log(typeof $);

• function이 출력되면 jQuery가 정상적으로 로드
• undefined가 나오면 jQuery가 로드되지 않은 거니까, <script> 경로가 잘못되었거나 서버에서 해당 파일을 제공하지 않는 걸 수도 있음.

또는 네트워크 탭에서 jquery.min.js가 200 OK로 정상 로드되었는지 확인

---

2. jquery.min.js 파일이 충돌하거나 덮어씌워지는지 확인

만약 다른 스크립트에서 $ 기호를 덮어썼다면, jQuery가 정상적으로 동작하지 않을 수도 있음.

(1) $가 jQuery인지 확인

 

console.log($); console.log($.fn && $.fn.jquery); // jQuery 버전 출력​

이 값이 undefined이거나 예상과 다르다면 다른 라이브러리에서 $를 덮어썼을 가능성이 있음

(2) jQuery.noConflict() 문제

어떤 스크립트에서 jQuery.noConflict()를 사용했을 수도 있음. 이 경우 $가 jQuery가 아니게 되니까, 아래처럼 $ 대신 jQuery를 직접 사용하여 테스트

 

jQuery(document).ready(function() { 
	jQuery(document).on('click', '#rewardAllRemove', function() {
		alert("동작한다");
		jQuery('#rewardCheckboxContainer input[type="checkbox"]').prop('checked', false); 
	}); 
});

 

---

3. jQuery가 여러 번 로드되었는지 확인

같은 jquery.min.js 파일이 여러 번 로드되면, 나중에 로드된 jQuery가 기존 jQuery를 덮어쓰면서 충돌이 발생할 수 있음.
개발자 도구(F12) → Network(네트워크) 탭에서 jquery.min.js를 검색해 보고 몇 번 로드되는지 확인

• 만약 2번 이상 로드된다면, 하나만 남기고 나머지는 삭제해야 함.