addClass and removeClass in jQuery - not removing class

Question

I'm trying to do something very simple. Basically I have a clickable div 'hot spot', when you click that it fills the screen and displays some content. I achieved this by simply changing the class of div, removing 'spot' and adding 'grown' and there's a little CSS animation to make it grow. This works fine.

The problem is, within this div there is a close_button, which at the moment is just text. I want this to switch the classes back - i.e. remove grown and readd spot. It doesn't do this when clicked. I believe it's to do with the element not having those classes when the DOM loads, but I'm new to jQuery and don't know how to work around this.

I think there's probably a much more sensible way of doing it, could someone point me in the right direction? I'd be very grateful. I've tried using toggleClass instead to no avail.

$( document ).ready(function() {      
    $(".clickable").click(function() {  
        $(this).addClass("grown");  
        $(this).removeClass("spot");
    });   

    $(".close_button").click(function() {  
        alert (this);
        $("#spot1").removeClass("grown");  
        $("#spot1").addClass("spot");
    });   
});

UPDATE:

I am using this code now,

$( document ).ready(function() {   
    $(document).on("click", ".close_button", function () { 
        alert ("oi");
        $("#spot1").addClass("spot");
        $("#spot1").removeClass("grown");
    });  


    $(document).on("click", ".clickable", function () {
        if ($(this).hasClass("spot")){
            $(this).addClass("grown");
            $(this).removeClass("spot");
        }
    });
});

strangely the close_button function still won't add 'spot' or remove 'grown' though it will add any other classes and it will remove other classes... I added the if clause because I thought perhaps both function were being triggered at the same time, undoing each other, but it seems to make no difference

Answer 1

What happens is that your close button is placed inside your .clickable div, so the click event will be triggered in both elements.

The event bubbling will make the click event propagate from the child nodes to their parents. So your .close_button callback will be executed first, and when .clickable is reached, it will toggle the classes again. As this run very fast you can't notice the two events happened.

                    / \
--------------------| |-----------------
| .clickable        | |                |
|   ----------------| |-----------     |
|   | .close_button | |          |     |
|   ------------------------------     |
|             event bubbling           |
----------------------------------------

To prevent your event from reaching .clickable, you need to add the event parameter to your callback function and then call the stopPropagation method on it.

$(".close_button").click(function (e) { 
    $("#spot1").addClass("spot");
    $("#spot1").removeClass("grown");
    e.stopPropagation();
});

Fiddle: http://jsfiddle.net/u4GCk/1/

More info about event order in general: http://www.quirksmode.org/js/events_order.html (that's where I picked that pretty ASCII art =])

Related Question : Add a class to an element in jQuery