[Jquery] 클릭 이벤트 중복 방지 (unbind, bind)

[Jquery] 클릭 이벤트 중복 방지 (unbind, bind)

 - 피곤하다 문제가 발생했다

1. 문제 발생

 - 제이쿼리를 사용하여 클릭 이벤트를 발생시켰으나 이벤트가 중복해서 발생

2. 바보같은 행동

 - 같은 엘리먼트에 중복해서 클릭 이벤트를 발생시킨 경우 그 수 만큼 중복 실행된다

 - 현재 소스의 경우 alert dialog가 두번 출력된다

 

 

//클릭이벤트 1
$("#test-button1").click(function(){
    alert("click event");
});
//클릭이벤트 2
$("#test-button1").click(function(){
    alert("click event");
});
 

3. 올바른 행동

 - 마지막으로 설정한 이벤트를 제외하고 마지막에 정의된 이벤트만 실행하고 싶다면 이벤트를 unbind 후 다시 bind 한다

 - 아래 두가지 소스는 동일하게 실행된다 입맛에 맞게 선택하면 되겠다

 - 클릭이벤트를 unbind 후 bind 1

//클릭이벤트 unbind
$("#test-button2").unbind("click");
//클릭이벤트 bind
$("#test-button2").bind("click",function(){
    alert("click event");
});
 

 - 클릭이벤트를 unbind 후 bind 2

//클릭이벤트 unbind & bind
$("#test-button2").unbind("click").bind("click",function(){
    alert("click event");
});
 

4. 출처

 - Jquery api documentation :  https://api.jquery.com

 - 해당 웹 사이트에 접속하면 친절한 외국인께서 영어로 알아듣기 쉽게 잘 설명해주고 있는 듯 하다 (나는 못알아듣겠다)

 

5. 끝

 - 피곤한 개발자 피로그래머

 - 나도 피곤하고 여러분도 피곤할테니 마음껏 긁으라고 우클릭 방지는 해놓지 않았으나 양심상 출처는 밝혀주자