HTML추가 후 이벤트가 작동이 안될 때

JS로 버튼 HTML을 추가하고 클릭 이벤트를 만들었는데 작동이 되지 않았다. 

이럴 때의 해결 법은 이벤트 버블링으로 상위 요소에 클릭 이벤트를 걸어서 실제로 클릭한 요소가 버튼일 때 이벤트를 진행시키는 것이다. 

 

<div class="row">
    <button class="cancel"></button>
</div>

<script>
    $('.row').on('click', function (e) { // 상위요소에 클릭 이벤트 걸기
    	if (e.target == document.getElementsByClassName('cancel')[i]) { // 실제로 클릭한 요소가 해당 버튼일 경우에 작동
        	// 이벤트 작동
        }
    });
</script>