[JQUERY] 동적으로 생성된 태그에 이벤트 주기

기존 코드

$("#btn").click(function(){
    // 클릭 시 수행될 작업
})

동적으로 추가된 태그의 경우 기존에 이미 렌더링된 클릭 이벤트는 적용이 안된다. 그 이유는 아직 아이디가 btn 인 버튼이 생성되지 않아 인식하지 못하기 때문

$("#btn").on({
    click: function() {
        // 클릭 시 수행할 작업
    }
});

내가 자주 쓰는 코드는 이거(이건 되는지 몰겠삼)

* on() 이벤트를 실행할 때 실행하는 순간 바로 그 자리에서 찾아 연결해주는 메서드

 

 

수정된 코드

$(document).on("click", "#btn", function(){ 
    // 클릭 시 수행할 작업
});

위와 같이 수정하여 해결 할 수 있다.(클릭 뿐 아니라 다른 이벤트도 마찬가지)

→ 버튼에만 이벤트를 주는 것이 아닌 document 문서 전체에 이벤트를 적용시켰기 때문!