동적으로 생성한 태그에 이벤트 적용하기

고객의 변덕으로 인해 체크박스를 동적으로 생성하여 출력한 뒤

체크박스를 선택할 때마다 문구를 자동 완성하여 출력해주도록 코드를 짰다.

 

평소와 다름없이

$('input[name=chkBox]').on('click', function(){
   console.log(this);
});

를 써봤는데 콘솔창에 아무것도 안 찍힌다.

 

원래 아래처럼 쓰면 동적으로 생성된 태그에 안 먹히고 위처럼 선언하면 되는게 아니었나...?

$('input[name=chkBox]').click(function(){
    console.log(this);
});

 

이 onClick 이벤트를 $(document).ready(function((){}) 안에 선언했는데

이렇게 선언하면 최초로 화면이 그려질 때 생성되었던 태그들에만 이벤트를 걸기 때문에

동적으로 생성된 태그들에게는 이벤트가 바인딩되지 않는다고 한다...

 

아래와 같이 선언해주면 동적으로 만든 태그에도 이벤트를 걸 수 있다.

$(document).on('click', 'input[name=chkBox]', function(){
    console.log(this);
});