jQuery do something on class change

Question

My aim is to write an event which will trigger if given element will get a class, or when this class would be removed.

Let's say I have:

<button id="my_butt_show">showtime</button>
<button id="my_butt_hide">hide me</button>
<span id="the_changer"></span>
<span id="the_end">some text</span>

<script>
  // this is the part of code I can't edit!
    $('#my_butt_show').click( function() {
        $('the_changer').addClass('hiMom');
    });
    $('#my_butt_hide').click( function() {
        $('the_changer').removeClass('hiMom');
    });
</script>

Now I would like something like this:

<script>
   $("#the_changer").onClassAdd('hiMom', $("#the_end").display('true') );
   $("#the_changer").onClassRemove('hiMom', $("#the_end").display('false') );
</script>

Does jQuery (or js itself maybe?) have something like this?

Note - of course this is just an example, the real thing I'm dealing with is harder and while here I could use some simpler solution, in my main task it wouldn't work.

Thx for responses.

----edit----

After first answers: I don't have access to the part of code where ".click" or "addClass" is, so I can't just do my stuffs there.

There is a [`MutationObserver`](https://developer.mozilla.org/en/docs/Web/API/MutationObserver), though not implemented in IE until version 11. — David Thomas, Nov 25 '14 at 13:37
If this question is already been asked then why some one can up-voted?This is upvoted also!!! — , Nov 25 '14 at 13:39
Here a snippet i did a long time ago. That may help you : http://jsfiddle.net/o0f7abrr/1/. Just add it to you file. Note you'll probably need to use delegation instead of direct binding. — Karl-André Gagnon, Nov 25 '14 at 13:55
@pbialy, the part you cannot edit is not even correct; did you omit certain parts while copying and pasting? — PeterKA, Nov 25 '14 at 13:58
@PeterKA as I said in note - my real code is different, I just wanted to make some minimal example and yes while I wrote it I made a syntax mistake, should be fine now, thx for pointing. — pbialy, Nov 25 '14 at 14:01
You can use `event.stopImmediatePropagation()` to stop those event handlers from firing. Then you would write your own handlers as in this demo: http://jsfiddle.net/fiddleyetu/8jan08kp/2/ — PeterKA, Nov 25 '14 at 14:02

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

Can't you add that action to the event .click? The class is added by an event so the same event should also be able to trigger the thing you want to do next right?

Also see: jQuery - Fire event if CSS class changed

edited May 23 '17 at 12:24

Community

1
1

answered Nov 25 '14 at 13:35

Freek Gille

41
8

The problem is I don't have access to the code part where the ".click" is. I should probably note it in my question, will edit it in a second. – pbialy Nov 25 '14 at 13:52

jQuery do something on class change

1 Answers1