Jquery - 클래스에서 요소를 제거한 후에도 활성 상태입니다.

Question

이렇게 될 것으로 예상되는지 모르겠으며 근본적으로 잘못된 것을하고 있습니다.

나는 주어진 클래스와 div을하고 div 클릭 할 때 응답을 제공하지만, 나는 다른 div을 한 것을 클릭 할 때 첫 번째 div에서 클래스를 제거합니다.

그러나 클래스를 제거한 후 처음으로 div을 계속 클릭하면 계속 응답을받습니다.

수업을 삭제 한 후에도 계속해서 클릭이 응답합니까?

HTML

<div class="testing">Testing</div> 

<div id="testing_remover">Remove class from testing</div> 

JS :

$(document).ready(function(){ 
    $('.testing').click(function(){ 
     console.log('testing is active'); 
    }); 

    $('#testing_remover').click(function(){ 
     $('.testing').removeClass('testing'); 
    }); 
}); 

바이올린 : http://jsfiddle.net/P3NpK/

Answer 1

이벤트 핸들러는 요소가 아닌 선택에 바인딩됩니다.

이 핸들러를 제거하려면 .off()를 사용 : jQuery를의

$(".testing").off("click"); 

---

버전 이전 1.7 should preferably 사용하는 대신 .off의 .unbind보다.

Answer 2

DOM 트리 위로 이벤트 처리기를 위임하거나 명시 적으로 이벤트 핸들러를 바인딩 해제해야합니다. 이벤트가 요소에 바인딩되면 클래스 이름 만 변경하면 이벤트 핸들러가 제거되지 않습니다. 위임 방식이 작동

$(document).on("click", ".testing", function(){ 
    console.log('testing is active'); 
}); 

이유는 그것의 일단 jQuery를 이벤트를 캡처하는 것입니다 :

$('#testing_remover').click(function(){ 
    $('.testing').off('click'); 
}); 

이 (updated fiddle)를 이벤트 핸들러를 위임하려면 :

이벤트 핸들러 ( updated fiddle)를 제거하려면 선택한 요소 (이 경우 document)로 버블 링됩니다. 이벤트 대상이 선택기와 일치하는지 확인한 후 이벤트 대상이 선택기와 일치하는지 확인합니다. 일치하는 경우 이벤트 처리기를 실행합니다. 수업을 삭제 한 경우 대상이 더 이상 선택자와 일치하지 않습니다.