문제 : 동적으로 생성되는 html 소스에 대한 click() 이벤트 문제
■ $(document).on()
이 경우는 "이벤트를 위임"을 보여준다고 생각하면 된다.
이 이벤트 핸들러(event handler)는 DOM트리 보다 위에 바인딩이 되어서 Selector와 일치하는 태그를 찾아 실행한다.
대부분의 DOM 이벤트 들이 Tree의 꼭대기에서 시작해서 나뭇가지처럼 아래로 퍼지기 때문에 이것이 가능한 것이다.
그래서 해당하는 id의 태그를 클릭하면 클릭이벤트가 발생할 때 모든 부모 태그들의 사이를 이동하는 클릭 이벤트가 생성되고 그 부모 태그들과 조상 태그들은 그 이벤트를 받을 수 있게 된다.
즉 우리가 알고있는 DOM 트리(꼭대기가 html의 뿌리라고 볼수 있는 <html> 태그 부터 아래로 나뭇가지처럼 자식태그들이 형성이 되어 있고, 자식 태그 들이 없는 태그들(나뭇잎)까지 쭉쭉 뻗어 있는 듯한 모양)보다 위에서 이벤트를 위임받아 실행하기 때문에 어떤 태그가 동적으로 생성되더라도 그 이벤트를 인식을 할 수 있다는 것이다.
(DOM을 모르겠다면 -> 위키 백과: DOM이란? Click!)
■ $(document).ready()
이 경우는 이벤트 핸들러(event handler)를 엘리먼트에 직접 바인딩을 한다. 엘리먼트에 직접 바인딩을 하기 때문에 지금 존재하는 태그들만 영향을 받고 새로 동적으로 생성되는 엘리먼트 들은 영향을 받을 수 없다.
쉽게 말하면 이 경우에서 click 함수를 전파할 때 알고있는 DOM의 엘리먼트 들에는 새롭게 생성된 태그들은 존재하지 않다고 알고 있기 때문이다.
'자바스크립트 > JQuery' 카테고리의 다른 글
| [Jquery] AJAX 데이터 전송 (1) | 2021.03.09 |
|---|