jquery append() 이벤트가 쌓일 때 ,preventDefault()가 작동하지 않을 때(preventDefault() is not working)

동적으로 영역을 불러올 때

그 추가된 영역에 관한 이벤트를 함수로 등록할 경우,

불러올때마다 해당 함수를 등록해주어야 한다.

나 같은 경우는 영역에 클래스를 주어 .each()로 이벤트를 전체로 주는 방식을 사용했는데

이런 문제가 발생한 적이 있었다.

<영역>

~~~~~ <button>

~~~~~ <button>   

------------------------>  btnFunction() 등록

~~~~~ <button>

~~~~~ <button>

~~~~~ <button>

------------------------>  btnFunction() 등록

~~~~~ <button>

------------------------>  btnFunction() 등록

function btnFunction() {
  $('button').each(function() {
    $(this).on('click', function() {
      ~~~~~~~~~~~~~
    });
  });
}

나는 'button'영역에 each를 돌린거라 딱히 여러번 등록해도 별 상관이 없을 줄 알았는데,

1번째 추가된영역 --> 3번

2번째 추가된영역 --> 2번

3번째 추가된영역 --> 1번

이런 식으로 이벤트가 계속 쌓이는 문제가 발생했다.

그래서 아래와 같이 로직 전에 e.preventDefault();로 막아주고 싶었는데 작동하지 않았다.

function btnFunction() {
  $('button').each(function() {
    $(this).on('click', function(e) {
      e.preventDefault();
      
      ~~~~~~~~~~~~~
    });
    
    $(this).click(function(e) {
      e.preventDefault();
      
      ~~~~~~~~~~~~~
    });
  });
}

그래서 아래와 같이 해결

function btnFunction() {
  $('button').each(function() {
    $(this).off('click');
  });
}

- preventDefault() : 기본적으로 등록되어 있는 이벤트를 해제할 때

- off() : 개발자가 바인딩 시킨 이벤트를 해제할 때

위와 같은 차이점이 있어 에러가 있었다.