[jquery, javascript] 동적으로 radio, checkbox를 만든 경우 동작하지 않는 이벤트 처리하기 (onclick, onchange)

동적으로 radio, checkbox를 만든 경우 동작하지 않는 이벤트 처리하기 (onclick, onchange)

 

일반적인 상황에서는 작동되는 이벤트가 안되는 경우가 있는데

바로 동적으로 만든 radio, checkbox 버튼인 경우 이벤트가 작동하지 않는 경우가 있다.

이런 경우에는 

$(document).ready(function(){

    $('input[name="rdoCountry"]').change(function(){

          //alert("제발 떠라");

     });

});

위에서 처럼 아무리 alert 넣어봤자 뜨지 않는다.

$(document).ready는 dom이 준비 완료가 됐을때이므로

이후 동작으로 인해서 동적으로 만든 경우에는 자식요소가 없어서 이벤트를 걸 수가 없다.

document.ready 안에 이벤트를 넣었을 지라도 

$(document).load 안에 이벤트를 넣었을 지라도 그 이후에 동적으로 생성된 것이라면 작동하지 않는다.

 

이럴때에는

$(document).on을 사용하여 이벤트 바인딩하자

동적으로 생긴 요소에도 이벤트가 적용된다.

$(document).on('change', 'input[name="rdoCountry"]', function(){

alert("이제 뜬다. 자유다");

});

//클릭 이벤트도 된다.

$(document).on('click', 'input[name="rdoCountry"]', function(){

});