[jQuery] 동적으로 생성된 리스트 이벤트 달기

보안 문제로 인해 모든 코드는 실제와 다릅니다

🧨 문제

동적으로 파일이 추가 된 뒤 파일 리스트가 삭제 되지 않는다.

 

🔧 과제

1. 파일이 추가 된 이후에도 리스트 파일에 대한 이벤트가 작동되게 만든다.

---

🪄해결

1.  MutationObserver를 이용해 Dom 변화 감지하기

파일 리스트가 추가 될 때마다 감지하여 이벤트가 활성화 될 수 있게 하였다.

// 1. 주기적으로 감지할 대상 요소 선정
let list = document.querySelector('.fileName__list')

// 2. 옵저버 콜백 생성
const callback = (mutationList, observer) => {
  for(const mutation of  mutationList){
  	let listItems = mutation.target.children
    
    for (const listItems of listItem){
    	let close = listItem.querySelector('.file__close')
        
        close.addEventListener('click',function(e)){
        	listItem.remove()
        }
    }
  }
};

// 3. 옵저버 인스턴스 생성
const observer = new MutationObserver(callback); // 타겟에 변화가 일어나면 콜백함수를 실행하게 된다.

// 4. DOM의 어떤 부분을 감시할지를 옵션 설정
const config = { 
    childList: true, // 자식노드 추가/제거 감지
};

// 5. 감지 시작
observer.observe(elList, config);

// 6. 감지 중지
if
observer.disconnect();

🚨 이벤트 중복이 일어나 또 다른 오류가 발생했다.

MutationObserver is not a constructor 오류가 발생했는데 이는 퍼블리싱 문제였다.

---

2.이벤트 바인딩을 이용하기

이벤트 바인딩을 이용해 동적으로 생성된 close 버튼에 이벤트를 생성해주었다

$(document).ready(function() {
  // 이벤트 핸들러를 상위 요소에 연결한다.
  $('.listItem).on('click', '.close', function() {	
    $(this).parent('.listItem').remove()
  });
});

 

 

---

🎉 결과

• 이벤트 중복을 줄여 오류 날 가능성을 줄였다