jQuery 동적추가(append, html) Click 이벤트 처리

jQuery 사용 시 Click이벤트 바인딩을 아래와 같이 많이 하는데 html(), append() 등으로 동적으로 추가되는 엘리먼트들에 대해서는 이벤트가 동작하지 않는다. Page가 로드되는 시점에 존재 않는 엘리먼트들에 대해서는 이벤트가 안먹힌다고 한다

$('.mydiv').on("click",function(){
   // 이벤트 처리
}

동적으로 추가되는 class가 ".mydiv"인 엘리먼트에 이벤트를 위에처럼 바인딩해줬을 때는 동작하지 않는다

 

이럴때는 Page가 로드될 때 존재하고 동적으로 변하지 않는 상위 엘리먼트를 기준으로 바인딩 설정을 해준다

/** <div class="myDivParent">
  *    <div class="mydiv">...</div>
  * </div>
  */
$('.myDivParent').on("click", '.mydiv', function(){
   // 이벤트 처리
}

class가 ".myDivParent"인 엘리먼트는 동적으로 변하거나 추가되는 엘리먼트가 아니라 이를 기준으로 잡고, 하위에 ".mydiv" 엘리먼트 이벤트를 설정해준다.