프로그래밍 언어/JavaScript

javascript) 동적으로 만들어진 동적 태그의 이벤트 추가 방법.

ruu++ 2024. 4. 4. 16:40

동적으로 추가된 태그에 이벤트 추가하기.

    fetch(url),axios, swr 등등

    .then(data =>{
      //데이터를 받아와 동적으로 태그를 추가해주는 코드들.
      const section_div = document.createElement("div");
      const body = document.querySelector("body");
      body.appendChild(section_div);
    })

document 객체를 통해 dom 접근을 해야 합니다.

1. 자바 스크립트에서 처리하는 방법

document.addEventListener('click',function(e){
    if(e.target && e.target.id== '이벤트를 발생시킬 태그에 설정한 아이디이름'){
          //do something
     }
      if(e.target && e.target.className== '이벤트를 발생시킬 태그에 설정한 클래스이름'){
          //do something
     }
 });

2. JQuery에서 사용 방법

  $(document).on("click", "#btnPrepend", function(){
    // Do something with `$(this)`.
  });

출처: https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript