[JavaScript/JQuery] append(), appendTo()로 추가한 요소에 script 이벤트가 작동하지 않을 때

$("#abc").append("<div id='test'> click </div>");
 
$('#test').click(function(){
    alert('a');
});
 
동적으로 append 한 요소에 이벤트를 걸어도 DOM Tree 구조에서는 새로 작성된
div#test를 찾지 못하여, 이벤트 바인딩에 실패하게 됩니다.
 
 
$(document).on("click","#test",function(){
    alert('a');
    /*
        $(document).on("이벤트","선택자",함수(){});
        id가 test인 태그를 click했을 때 function(){} 중괄호 안의 이벤트를 실행하라.
        라는 의미입니다.
        
        무엇이 다르냐 하면, DOM 트리 구조의 상위요소(document)에 바인딩되며,
        document안의 선택자와 일치하는 요소가 존재 혹은 생성 될 때 실행됩니다.
 
        즉, 이벤트를 선택자가 아니라 document에 위임한다고 보시면 됩니다.
    */
});
 
$(document).ready(function(){
    // ※ 이 방법은 작동하지 않습니다.
    // 이것은 DOM 구조가 전부 로딩 되면 실행됩니다.
    // 고로, 동적으로 DOM 트리구조에 추가시키는 append()요소는,
    // 이미 document가 ready된 후이기 때문에 가용불가합니다.
});
 
 
참고로, "click"에 들어갈 수 있는 이벤트 리스트를 볼 수 있는
JQuery 사이트 링크를 남겨두겠습니다.

https://api.jquery.com/category/events/