jQuery 동적 객체의 이벤트 중복 문제

jQuery 동적 객체의 이벤트 중복 문제

 

타 업체가 개발한 사이트의 유지보수 요청을 받아 소스를 보았는데,

html과 script를 완전히 분리하여 개발 했더군요.

 

그래서 모든 jquery event는 js 내에서 구현했는데,

문제는 동적 객체의 이벤트 등록 시 클릭 이벤트가 정상 동작 하지 않는다는 것이였습니다.

 

코드를 보면

 

$(document).on('mouseenter click', '#popClose', function(e){
    //팝업 닫는 소스
});

 

이런 식으로 모든 동적 객체에 대한 이벤트를 등록해 놓았습니다.

다른 객체도 마찮가지로 mouseenter 이벤트는 정상동작하지만 click 이벤트가 동작하지 않더군요.

 

 

 

문제가 무엇일까요?

위와같이 동적으로 생성되는 객체에 id 값을 주게되면, 객체의 삭제가 제대로 이루어지지 않는 경우

중복 문제가 발생하게 됩니다. 그러면서 제대로된 이벤트가 바인드되지 않게 되죠.

 

코드 수정을 최소화하면서 해결하는 방법은,

이벤트를 언바인드 한후 다시 등록하는 방법입니다.

 

$(document).on('mouseenter click', '#popClose', function(e){
    #('#popClose').unbind('click');
    #('#popClose').click(function(){
        //팝업 닫는 소스        
    });
});

 

jQuery Unbind 메소드를 사용하여, 기존의 클릭 이벤트를 해제하고 다시 등록해주면

문제를 해결 할 수 있습니다.