[Javascript] 동적 삽입된 버튼 작동 오류

1. 문제 상황

- 데이터를 불러 올 때마다 Foreach로 html 화면에 동적으로 일정들을 배치했다. 이럴 때 마다 버튼들도 같이 삽입되는데 맨 위의 값만 동작하고 아래의 값들은 동작하지 않는 오류가 생겼다.

$('.btn-class').click(function() {...})

- 코드를 보니 버튼 클릭 이벤트는 작성이 되어 있었고 실제로 제일 상단의 버튼은 잘 작동한다. 하지만 상단을 제외한 다른 요소들은 작동을 하지 않았다.

- 또 막상 Check box 의 경우에는 독립적으로 작동이 잘 되었다...

- 이상하게 동적으로 삽입된 버튼 요소들만 독립적으로 이벤트가 발생하지 않았다는 것이 문제이다.

2. 원인 분석

- 애초에 Static 으로 있던 버튼들은 버튼이 잘 작동하나, 동적으로 삽입된 버튼들이 작동이 되지 않는 이유는 JS의 Click 이벤트의 경우 이벤트 위임을 사용하지 않는다면 처음 로드될때 존재하는 요소에만 이벤트가 등록되기 때문이다. 

- 그러니까, Js 코드 실행 시점에 존재하는 버튼 요소에 대해서만 click 이벤트가 등록된다는 것이다. 

- 코드 실행 이후에 동적으로 추가된 버튼들은 이벤트를 인식하지 못하게 된다는 말이다. 동적으로 생성된 요소에는 이벤트가 적용되지 않아 첫 번째 요소에만 작동하는 것처럼 보였던 것이다.

- 따라서, Document(페이지 전체)에 이벤트를 걸어 이벤트가 발생하면 버튼 요소에만 실행되도록 이벤트를 위임하는 방식으로 접근해야 한다.

- 그래서 위의 코드처럼 버튼에 onclick을 하는게 아니고, Document 에 on을 걸어서 Js 코드를 작성해야한다.

 

3. 문제 해결

// 기존의 코드
$('.btn-class').click(function() {...})
// 바꾼 코드
$(document).on('click', '.btn-class', async function () {}

- 이런식으로 전체 Document에 on 이벤트를 준다면 동적 버튼이 잘 작동할 것이다.