[JavaScript] 동적으로 생성된 요소에 이벤트걸기

위와같은 페이징 버튼을 동적으로 생성하게 만들고있었다. 15를 누르면 원래 있던 숫자를 싹 지우고 16부터 20까지 나오게 동적으로 요소를 만들었다.
근데 이제 이렇게하면 이전에 걸어둔 다음 이벤트가 동작하지 않는 문제가 생겼다

// 오른쪽버튼 눌렀을때 처리
$("#rightGo").on('click',function(){
  // 마지막 페이지일경우
  alert("total:"+totalPage+"마지막요소:"+ $('.num').text()[$('.num').length-1] );
  if($('.num').text()[$('.num').length-1] == totalPage){
    alert("마지막 페이지입니다.");
  } else {
    // 6페이지의 페이지바부터 만들자
    bar($('.num').text()[$('.num').length-1],totalPage);
  }

})

solve

이벤트를 document에 걸어주면 되더라!
다만 이 방법은 이벤트가 중복발생할수도있다.

• 요소 아이디가 유니크하지 않거나
• 이벤트 바인딩제거가 제대로 이뤄지지 않았을때 생긴다($(document).off()를 사용해주면 해결될지도..)

혀튼 코드는 다음과같다

// 오른쪽버튼 눌렀을때 처리
$(document).on('click',"#rightGo",function(){
  // 마지막 페이지일경우
  alert("total:"+totalPage+"마지막요소:"+ $('.num').text()[$('.num').length-1] );
  if($('.num').text()[$('.num').length-1] == totalPage){
    alert("마지막 페이지입니다.");
  } else {
    // 6페이지의 페이지바부터 만들자
    bar($('.num').text()[$('.num').length-1],totalPage);
  }

})