jQuery 중복이벤트 제거(바인딩 제거)

하나의 html 내에서

동적으로 html 불러올 때, 문제가 생겼다.

 

main html 내에게

A의 html을 불렀을 때, id="search"가 있고,

A의 html을 제거하고

B의 html을 불렀을 때, id="search"는 경우가 있다.

 

전체 html 내에서는 A가 사라지고 B가 생성되어서 id가 중복되지 않는다고 하지만,

jQuery에서는 여전히 A의 html id를 바인딩하고 있는 상태다.

 

그래서 B의 id를 클릭하면

A의 이벤트가 실행된다던지, 2번 이상 이벤트가 중복으로 동시에 실행된다던지 하는 문제가 생긴다.

 

스크립트는 정상적으로 id 바인딩이 제거가 되지 않은 상태다.

 

이러한 경우는 기존의 jQuery 바인딩을 제거시켜줘야한다.

 

 

jQuery의 .off() 를 사용하면 쉽게 해결할 수 있다.

( .off는() jQuery 버전 1.7 이상, 버전 1.7 미만은 .unbind() )

(현재 최신버전은 3.2.0입니다. jQuery를 최신버전을 추천드립니다.)

 

전체 바인딩을 해제할 것이기 때문에 body영역을 바인딩 해제한다.

 

 

$(document).ready(function() {

    $("body").off(); //맨 위에 써야한다.
   
    $("#search").click(function(){ // 클릭이벤트 예시

        fn_search();
    });
    
    $("body").on("click", "[id=fn_search2]", function(event) {  // 클릭이벤트 예시2
    
        fn_search2();
    });
});