Question

I don’t know if it’s supposed to be like this, and I am doing something fundamentally wrong.

I have a div with a given class and when you click on the div it gives a response, but then I have another div and when clicking on that one it removes the class from the first div.

However when I continue clicking on the first div after removing its class, I continue to get a response.

Why do the clicks continue to respond after I’ve removed the class?

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');
    });
});

Fiddle: http://jsfiddle.net/P3NpK/

Answer 1

Event handlers are bound to the element, not the selector.

To remove a handler, use .off():

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

---

Versions of jQuery earlier than 1.7 should preferably use .unbind instead of .off.