동적 생성된 요소에 클릭 이벤트 주기

아래와 같이 동적 생성으로 만들어진 요소에는 이벤트 바인딩이 되지 않음.

//특정 상황에서 동적으로 생성하는 코드
$('.table-wrap')
                .append($toolbar)
                .append($('<div>').addClass('title').text(task).attr('data-index', key)
                    .append($('<span>').addClass('font__blueGreen').text(' (' + $Count + '건)'))
                    .append($('<div>').addClass('task-edit'))
                    .append($('<div>').addClass('edit-form')
                        .append($('<input type="text">').addClass('edit-input').attr('placeholder', task))
                        .append($('<button type="button">').addClass('edit-form-btn--change').text('변경'))
                        .append($('<button type="button">').addClass('edit-form-btn--cancel').text('취소'))))
                .append($('<table>').addClass('fly').attr('id', key).attr('data-index', key)
                    .bootstrapTable(_getTableOptions(value)));

아래와 같이 작성하여 클릭을 해봐도 작동하지 않음

$('.task-edit').click(function() {
	alert('동적생성된 요소라 클릭이벤트 작동 안함')
});

아래와 같이 동적 생성이 시작되는 '#jsTable'이 on 된 이후에, '.task-edit'가 클릭되었을때 로 코드를 작성해야 클릭이벤트가 발생한다.

    $('#jsTable').on('click','.task-edit',function () {
        let $this = $(this);
        $this.next().addClass('on');
    });
    $('#jsTable').on('click','.edit-form-btn--cancel',function () {
        let $this = $(this);
        $this.parent('.edit-form').removeClass('on');
    });

동적추가 주의할점

1. "$('.selector') 클릭시 동적 추가"하는 코드라면 코드 처음부분에 append 될 애들을 삭제하는 코드가 있어야함 => 안그러면 클릭할때마다 추가되어 중복 오류 발생
2. 반복문 이용해서 동적추가하는 코드라면 맨처음 append하는 대상은 반복문 바깥에 작성하기