행복도 괴로움도 모두 다 내가 정하는 것

<div id="commentList"></div>

$(document).ready(function(){
    // 1번
    $(".delBtn").click(function(){
        alert("del clicked");
    });
    
    // 2번
    $("#commentList").on("click", ".delBtn", function () {
        alert("del clicked");
    });
});

1번의 경우 페이지가 로딩된 후 .delBtn 요소에 click 이벤트를 설정 하는데 이때 해당 요소가 없을 경우 이벤트가 걸리지 않는다.

때문에 비동기 요청으로 해당 요소를 뒤늦게 만들어 줘도 클릭 시 이벤트 호출이 되지 않는다.

2번의 경우는 .delBtn 요소들을 감싸는 부모 요소에 이벤트를 걸어 놓은 상황이다.

이 경우 아직 .delBtn 요소들이 만들어 지지 않았지만 부모 요소에 이벤트를 걸기 때문에 이후 비동기 요청으로 자식

요소를 만들어 줘도 이벤트가 호출이 된다.