[SOLVED] Why is a removed class selector still clickable ?

[SOLVED] Why is a removed class selector still clickable ?

Hi there!!

I am a newbie here and had a strange problem, maybe someone can explain it:
I have a function that changes it's element class on click. I Also use the class as selector for that function. So, when clicked, it should not be clickable again. But it does, like if, even after removed, it's class would still remain in the memory of DOM, or something...

The only way to avoid this behavior is to put the actions inside a condition " if($(this).parent().hasClass("topFilterOptionOff"))"
Does anyone know why?

Here is the jquery code:

$(document).ready(function(){
   $('.topFilterOptionOff > a').click(
         function(){
            alert("this should happen only if my parents class was '.topFilterOptionOff'");
            if($(this).parent().hasClass("topFilterOptionOff")){
                //reset active elements to off
               $('.topFilterOptionOn').removeClass('topFilterOptionOn').addClass('topFilterOptionOff');
               //activate the element
               $(this).parent().removeClass('topFilterOptionOff').addClass('topFilterOptionOn');   
            }
         
         }
      )
   $('.topFilterOptionOff:eq(0)').click();
});


The markup
<div class="topFilter">
           <span class="topFilterOptionOff">
               <a href="#">Item 1</a>
            </span>
            <span class="topFilterOptionOff">
               <a href="#">Item 2</a>
             
            </span>
            <span class="topFilterOptionOff">
               <a href="#">Item 3</a>
            </span>
        </div>



Does anyone know why this is happening??