click 이벤트 중복 제어

element 동적 추가됐을 경우 이벤트

보통 click 이벤트는 아래와 같이 사용한다.

$(id or class).on("click", function(){

});

 

하지만 동적으로 element가 나중에 추가된 경우에는 이벤트가 적용되지 않는 상황이 발생한다.

그럴 때는 아래와 같이 이벤트를 줄 수 있다.

 

단, 이럴 경우 문제가 하나 발생하는데 페이지 전환이나 새로고침 또는 특정 함수 안에 click 이벤트를 넣어둔 경우 계속해서 event의 발생 횟수가 증가하게 된다.

 

예를 들어... 함수가 5번 실행되어 클릭을 한번 했지만 5번의 이벤트가 중복되어 발생된다는 것이다.

 

따라서 아래와 같이 이벤트 제어를 추가해 주면 된다.

$(document).on("click", "아이디, 클래스", function(e){
	e.stopImmediatePropagation();
});

※ Event.stopImmediatePropagation()

Event 인터페이스의 stopImmediatePropagation() 메서드는 같은 이벤트에 대해 나머지 수신기가 발동하지 못하도록 방지합니다.