JQuery Detect class changes

Question

I am using a plugin that added a class open to .slide-out-div when opened.

So I am trying to change some css if the open is detected.

What I need to do is

IF

$('.slide-out-div **open**') IS Detected then

$('.otherDiv').css('top','0px');

Not sure how to put this together...

What plugin are you using? It sounds like a better plan to work the solution into the used script. — dubbelj
– dubbelj, Commented Mar 7, 2012 at 10:51
also, the plugin author might have added custom events. Worth checking out. — Mild Fuzz
– Mild Fuzz, Commented Mar 7, 2012 at 11:02
possible duplicate of jQuery - Fire event if CSS class changed — bummi
– bummi, Commented Oct 20, 2013 at 13:08

Stefano Ortisi · Accepted Answer · 2016-06-08 14:12:17Z

32

The question's a bit old, but since I came across while looking for a similar problem, thought I'd share the solution I went with here - Mutation Observers

In your case, I'd create a mutation observer

var mut = new MutationObserver(function(mutations, mut){
  // if attribute changed === 'class' && 'open' has been added, add css to 'otherDiv'
});
mut.observe(document.querySelector(".slide-out-div"),{
  'attributes': true
});

The function in mutation observer is called any time an attribute of .slide-out-div is changed, so need to verify the actual change before acting.

More details here on Mozilla's documentation page

edited Jun 8, 2016 at 14:12

Stefano Ortisi

5,3163 gold badges35 silver badges44 bronze badges

answered Jan 21, 2015 at 22:16

Adi B

1,21915 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

random_user_name Over a year ago

This looks like a great approach, but should be noted that it doesn't appear to have support in IE10 and older.

muratoner Over a year ago

This suggestion is so good because native :) Thanks your share.

Showhan Ahmed Over a year ago

Mutation Observer is an Awesome feature. :) Thanks for sharing.

gdoron · Accepted Answer · 2012-03-07 10:46:12Z

30

There is no event of class-added, you will need to track it yourself...

It can be done with an infinite loop with setTimeout to check if the class has changed.

function checkForChanges()
{
    if ($('.slide-out-div').hasClass('open'))
        $('.otherDiv').css('top','0px');
    else
        setTimeout(checkForChanges, 500);
}

You can call the function when you want, or onDOM ready:

$(checkForChanges);

edited Mar 7, 2012 at 10:46

answered Mar 7, 2012 at 10:39

gdoron

151k59 gold badges302 silver badges375 bronze badges

13 Comments

dubbelj Over a year ago

This will work. However, it's a very dirty approach if you ask me.

gdoron Over a year ago

@sieppl. mutation events are deprecated as they have huge performance impact.

sieppl Over a year ago

@gdoron. +1 for mentioning this.

vsync Over a year ago

@gdoron - They aren't deprecated! (check MDN) the OLD ones are, the mutation observer is the new way of detecting changes. here's how - stackoverflow.com/a/14570614/104380

gdoron Over a year ago

@Healkiss it is exactly the same. The stack won't endless grow.

|

Muhammad Reda · Accepted Answer · 2014-02-02 05:27:08Z

You can use attrchange jQuery plugin. The main function of the plugin is to bind a listener function on attribute change of HTML elements.

Code sample:

$("#myDiv").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "class") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/open/i) == -1) { // "open" is the class name you search for inside "class" attribute

                // your code to execute goes here...
            }
        }
    }
});

Collectives™ on Stack Overflow

JQuery Detect class changes

3 Answers 3

3 Comments

13 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

13 Comments

Comments

Linked

Related