addClass and removeClass in jQuery – not removing class

by

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

More Related Contents:

  1. jQuery find events handlers registered with an object
  2. What is the difference between jQuery: text() and html() ?
  3. jQuery – Trigger event when an element is removed from the DOM
  4. Get an element by index in jQuery
  5. jQuery event for images loaded
  6. Rotating a Div Element in jQuery
  7. Easiest way to toggle 2 classes in jQuery
  8. jqGrid custom format fails on addClass
  9. How can I run a directive after the dom has finished rendering?
  10. jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
  11. JQuery to check for duplicate ids in a DOM
  12. Is it possible to use jQuery to read meta tags
  13. jQuery: select an element’s class and id at the same time?
  14. How do I get the entire page’s HTML with jQuery?
  15. Events not registering after replaceWith
  16. Iterating over element attributes with jQuery
  17. AngularJS: $viewContentLoaded fired before partial view appears
  18. Finding the id of a parent div using Jquery
  19. Check if class already assigned before adding
  20. How to get form html() via jQuery including updated value attributes?
  21. if checkbox checked add class to parent element
  22. Get the selected option id with jQuery
  23. Dynamically adding HTML form field using jQuery
  24. delayed addclass/remove class function not working
  25. Benefits of using attr() over addClass in jquery
  26. How to destroy a DOM element with jQuery?
  27. Get the text after span element using jquery
  28. Set value of hidden field in a form using jQuery’s “.val()” doesn’t work
  29. Is there a way to prevent overlapping events in jQuery FullCalendar?
  30. How can I remove the search bar and footer added by the jQuery DataTables plugin?

Leave a Comment