jQuery - removeClass doesn't seem to work along with variable increase

Question

I'm using jQuery 1.10.2 in Wordpress 3.6.1.

I have an image map with 5 areas, each one having class "unclicked".

Each time I click on one of these areas I want to prevent the default behaviour when the href attribute is "#", increase a clicksNumber variable by 1 and remove the element's "unclicked" class in order to avoid increasing the clicksNumber variable after the first click.

I tried the following code but the variable keeps increasing even if, with the Inspect Element, I see that there aren't anymore areas with "unclicked" class.

jQuery('.unclicked').click(function (e) {
    nClicks = nClicks + 1;
    jQuery(this).removeClass('unclicked');
    e.preventDefault();
    alert("CLICK ON UNCLICKED ELEMENT, Elements Clicked" + nClicks);
});

Any ideas why this isn't working?

Answer 1

jQuery('.unclicked').on('click',function(e){
   nClicks = nClicks+1;
   jQuery(this).removeClass('unclicked');
   jQuery(this).off('click');
   e.preventDefault();
   alert("CLICK ON UNCLICKED ELEMENT, Elements Clicked" + nClicks);
});

Use .on() instead of .click(), then you can use .off() to unbind the handler.

The reason your problem was occurring is because even though you were removing the unclicked class, the elements themselves had event handlers bound to them that will stay bound regardless of changes to the elements structure.

Another way you could accomplish this without having to unbind each handler as you go, is delegate the event to the nearest static parent element.

jQuery('#parent').on('click', '.unclicked', function(e){
  // Your code
  // Remove .unclicked class
});

This would work because the handler gets evaluated when the event bubbles up to the #parent, which would check each time if the element matches the condition (which in the above case is that it has the class .unclicked)