addClass and removeClass in jQuery - not removing class

0 votes

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

May 31 in JQuery by Edureka
• 13,640 points
192 views

1 answer to this question.

0 votes

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 =])

answered Jun 2 by Edureka
• 13,640 points

Related Questions In JQuery

0 votes
1 answer

Difference between :hidden and :not(:visible) in jQuery

During animations that hide an element, the ...READ MORE

answered Jun 14 in JQuery by gaurav
• 17,580 points
21 views
0 votes
1 answer

Error:jQuery scrollTop not working in Chrome but working in Firefox

Hello @kartik, If your CSS html element has the following overflow markup, scrollTop will ...READ MORE

answered May 29, 2020 in JQuery by Niroj
• 82,740 points
7,221 views
0 votes
1 answer

How to find a parent with a known class in jQuery?

Hello @kartik, Assuming that this is .d, you can write $(this).closest('.a'); The closest method returns the ...READ MORE

answered Oct 5, 2020 in JQuery by Niroj
• 82,740 points
2,234 views
0 votes
1 answer

jQuery find all elements with class beneath parent, even in children elements

Remove > from your select $(".parent .searchEl"). You can use the .find() method ...READ MORE

answered Jun 7 in JQuery by Edureka
• 13,640 points
75 views
0 votes
1 answer

difference between $ and $() in jQuery

JavaScript: It is a major scripting programming language ...READ MORE

answered Jun 10 in JQuery by rajatha
• 7,040 points
18 views
0 votes
1 answer

How to add and remove classes in Javascript without jQuery

To add or remove a class on ...READ MORE

answered Jun 14 in JQuery by rajatha
• 7,040 points
9 views
0 votes
1 answer

How to shorten repeating code with html function and return tags in jquery

Firstly note that replace() only accepts two arguments, the ...READ MORE

answered Jun 15 in JQuery by rajatha
• 7,040 points
27 views
0 votes
1 answer

jQuery .slideUp() and .slideDown() equivalent in Angular2

In order to create a custom slideUp/Down ...READ MORE

answered Jun 16 in JQuery by rajatha
• 7,040 points
28 views
0 votes
1 answer

get_template_directory_uri() in Jquery and CSS

JS files aren't parsed by PHP, so ...READ MORE

answered Jun 2 in JQuery by Edureka
• 13,640 points
108 views
0 votes
1 answer

Laravel + adminLTE3 jquery and other dependencies not found

To add jquery to laravel you first ...READ MORE

answered Jun 2 in JQuery by Edureka
• 13,640 points
59 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP