jquery 동적으로 생성된 DOM 개체에 대한 이벤트 처리

 

jquery 동적으로 생성된 DOM 개체에 대한 이벤트 처리

이번에는 어떠한 이벤트로 인해 새로 생성되는 DOM 객체에 대한

이벤트를 거는 방법에 대해 포스팅 하겠습니다.

일반적인 방법으로 코딩하게 되면 

페이지가 로딩되면서 생성된 DOM 개체에 대한 이벤트만 먹기 때문에

새로 생성된 객체에 대한 이벤트는 적용이 되지 않습니다.

 - 페이지 로딩시 불러온 DOM 개체에 대한 이벤트 처리

$( document ).ready(function() {
 
$( "#upload_form").on( "submit", function () {
//최초로 생성된 DOM 개체 중 id가 upload_form인 개체의 submit 이벤트 실행 시 실행
});
});

위와 같은 방법으로 작성 시 

jquery의 html 등으로 인해 동적으로 만들어진 개체는 위 이벤트를 타지 않습니다. 

동적으로 생성된 개체도 이벤트를 타게 하기 위해선 아래와 같은 방법을 사용합니다.

$( document ).ready(function() {
    $( "table").on( "submit" , "#upload_form", function () {
    //최초생성 및 동적으로 생성된 <table>의 하위개체 중 id가 upload_form 인것의 submit 이벤트시 실행 시 실행
    });
});

or

$(document).on('click', '.roadNum button', function(){
    if($(this).prop('class')=='on'){
        $(this).prop('class', '');
    }else{
        $(this).prop('class', 'on');
    }
});

 

 

위와 같이 작성 시 페이지 로딩시에 불러온 기존 DOM 개체 와 새로 생성된 개체 모두에 적용이 됩니다.