상황
프로젝트를 진행하다보면, 페이지가 그려지고 난 후에 ajax 등 비동기 방식을 이용하여
동적으로 요소들을 생성, 추가하는 경우가 있다. (innerHTML이나 jQuery의 append()와 같은 방법 등..)
이런 경우에는 이벤트 바인딩이 되지 않는다.
이미 페이지가 로드되면서 작성한 이벤트 코드가 바인딩 된 상태이기 때문이다.
동적으로 추가된 요소에 이벤트를 바인딩해야 한다면 어떻게 해야 작동할까?
적용
✔️1. 자바스크립트로 동적 요소 이벤트 바인딩
📌이벤트 버블링을 이용해서 미리 그려져있는 요소에 이벤트를 건다.
<html>
<body>
<div class="root">
// 여기에 동적으로 appendChild
</div>
<button class="btn" name="btn">동적 추가</btton>
</body>
</html>
<html>
<body>
<div class="root">
<h2 class="parent">
<button class="child">
<span class="new">동적으로 생성!</span>
</button>
</h2>
</div>
<button class="btn" name="btn">동적 추가</btton>
</body>
</html>위 소스를 간단히 설명하면, [동적 추가] 버튼을 클릭 시 root태그 하위에 h2태그로 감싸진 html이 동적으로 생성된다.
이 경우에 class명이 new인 span태그에 클릭이벤트를 걸고 싶다면 어떻게 해야할까?
document.querySelector('.root').addEventListener('click', function(e) {
console.log('성공!');
});이렇게 이벤트를 걸어주면 span태그 클릭 시 잘 동작된다.
왜 root에 이벤트를 걸었는데도 new를 클릭시 동작되는 걸까?
바로 이벤트 버블링 때문이다.
span에서 click 이벤트를 잡지 못하고, button으로 이벤트가 버블링되고
button에서도 잡지 못해 h2로 이벤트가 버블링 되고...
이렇게 타고타고 버블링 되어서 root에서 이벤트를 잡아서 실행된다!
✔️2. 제이쿼리로 동적 요소 이벤트 바인딩
제이쿼리 이벤트 동적 바인딩은 좀 더 간단하다.
$(document).on('click', '.root .new', function(e) {
// 실행 코드 작성
});$(document).on()문법을 사용하고 두번째 인자로 클릭한 요소를 넘겨주면 된다.
'Front > JavaScript & jQuery' 카테고리의 다른 글
| input이 하나인 경우, enter키를 누르면 form submit 되는 현상 막기 (0) | 2023.07.18 |
|---|---|
| [jQuery] 제이쿼리 validation 활용하여 유효성 검사(ajax 실시간 통신, 유효성 실패 메시지 변경) (0) | 2023.05.02 |
| [jQuery] 제이쿼리 validation 플러그인으로 쉽게 유효성 검사하기 (0) | 2023.02.28 |
| jQuery를 바닐라 JS(Vanilla JS)로 변환하기 Pure Javascript (0) | 2023.02.16 |
| [JavaScript] Safari 에서 new Date() NaN 오류 이슈 (0) | 2022.11.21 |
댓글