[jQuery] jQuery append 이후 event 먹통 현상 대처

 

 

최대한 간략하게 설명해보면 다음과 같은 케이스가 있다

//html
<div id="base">
</div>



//javascript
$('#somethingBtn').click(function () {
  $("#base").append("<div class'new'> bla bla </div>");
})


$('.new').click(function() {
  //not working!!!!!
});

 

 

1. base id를 갖는 div는 현재 비어있다

2. 어떤 버튼(somethingBtn)을 클릭하면 base 밑으로 .new 라는 class를 가진 엘리먼트가 들어간다

3. '.new'로 이벤트를 달아놨기때문에 이벤트가 먹힐꺼라고 생각한다

4. 안먹힌다

 

조금 극단적인 예이지만 필자의 경험상 이벤트가 안먹힌다.

 

해결방법은 간단하다

$('#base').on('click', '.new' ,function() {
  //bla bla ... 
});

해당 엘리먼트에 이벤트를 바로 연결하지말고 append 되는 상위 엘리먼트에 on 으로 이벤트를 걸어준다

 

 

on()과 delegate() 등등의 자세한 정보를 알고싶다면

https://hohoya33.tistory.com/44 를 참고해도 좋을 듯 하다

 

이벤트는 항상 on()으로 거는걸 추천한다

 

 

 

 

https://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method

Jquery click event not working after append method