jquery - onClick Switching Classes issue -

what have <div#graphicsclosebox> nested inside <div#catbox>. it's supposed when click , class changes back. cannot use toggleclass because there form input inside box, clicking form messes things up.

 $('#catbox').click(function() {         $(this).removeclass('cat');         $(this).addclass('cat2'); }); $('#graphicsclosebox').click(function() {     $('#catbox').removeclass('cat2');     $('#catbox').addclass('cat'); }); 

if want example check http://codepen.io/rtro92/pen/mihlu pretty straightforward. know problem in 2nd function, can't target #catbox. thanks!

your problem event propagation (a.k.a. "bubbling"), functionality events in 1 dom element "bubbles" parents, unless event told not so.

in other words, when clicks <div#graphicsclosebox>, classes correctly added , removed specified. directly after, click event on <div#catbox> triggered, - since resets classes - undoes effect of click on inner <div>.

to fix it, use .stoppropagation():

$('#graphicsclosebox').click(function(evt) {     // other stuff     evt.stoppropagation();     return false; }); 

it should work without return false @ end, since browsers can use "falsy" return value prevent bubbling, tuck on there anyway.