DOM 객체에 동적으로 추가된 이벤트 핸들러 제거하는 방법

출처 :

 

jQuery의 bind(), live(), delegate() 함수를 사용해서 이벤트 핸들러를 등록하는 경우, 각각 unbind(), die(), undelegate() 함수를 사용해서 이벤트 핸들러를 삭제할수 있다.

이때, bind()로 추가한것은 반드시 unbind()로, live() 로 추가한것은 die()로, delegate()로 추가한것은 undelegate() 로 삭제해야 하는것에 주의하자.

이렇게 unbind()류의 함수를 사용해서 이벤트를 없앨때에는

 

$('#foo').unbind('click');

 

와 같이 사용하면 되며, unbind()의 인자를 주지 않으면 $(‘#foo’)에 걸려있는 모든 bind된 이벤트핸들러를 삭제하게 된다.

또한 아래와 같이 이벤트 핸들러를 명명해서 bind한 후에 해당하는 핸들러만 없애는 것도 가능하다.

 

var handler = function() {

        alert('The quick brown fox jumps over the lazy dog.');

};

$('#foo').bind('click', handler);

$('#foo').unbind('click', handler);

 

하지만 아래와 같이 이름을 지정하지 않고 bind한 경우는 동작하지 않는다.

 

$('#foo').bind('click', function() {

        alert('The quick brown fox jumps over the lazy dog.');

}); // will NOT work $('#foo').unbind('click', function() { alert('The quick brown fox jumps over the lazy dog.'); });

 

한편, <td onclick=""> 와 같이 정적으로 onclick이 설정 된것은 unbind()로 해제할수 없는데, 이 경우에는 $(‘.td’).removeAttr(“onclick”); 와 같이 해제해야한다.

 

---------------------------
선택된 객체에 걸린 이벤트를 제거한다.
$('선택자').off('이벤트 명');
ex) on 예제
$('선택자').on('click',function(){

});

출처: https://r-0o0-j.tistory.com/67 [#006888]