is it possible to trigger events on class change events?

Question

I want to do something to an HTML element after it has been processed by some other js process over which I have no control.

for example, given ... ...

and some 3rd party async app does $('div.x').each(function(){ /* do stuff */; this.addClass('processed');});

Is there some strategy for registering an interest in the div when its class changes to 'processed'?

Answer 1

Not that I know of, from the series of JQuery events.

You might want to implement a interval polling check though it sounds kinda messy :P

Answer 2

No simple solution. Similar question here.

Check out PPK's list of browser events to see what's available.

Answer 3

This is probably a bad idea, but i think its better than polling...

Take a look at the jQ lib uncompressed, copy the code for addClass, removeClass, and attr.

then use $.fn.extend passing in new definitions for those methods. You really wont be changing them all that much just telling them to call this.trigger('classChange') after they have done their thing. Although in the case of attr youll need an if statment telling it to fire only if the attribute class was the target or if the key 'class' was in the hash passed in.

you can then use $(selector).bind('classChange', lambda); to provide the operation for what happens on a class change.

Ofcourse ive never tried to overload a core method before, but i dont see why you couldnt.

Might look something like this. Ive never looked at the interals so you might not be able to just include it in blocks like ove doen - you might have to modify individual switch/if cases or something...

$.fn.extend({
  addClass: function(class){
    // standard jq logic
    this.trigger('changeClass');
    // standard return
  },
  removeClass: function(class){
    // standard jq logic
    this.trigger('changeClass');
    return this;
  },
  attr: function(prop, val){
    // standard jq logic

    if(typeof prop == 'object' && typeof prop.class != 'undefined'){
      this.trigger('changeClass');
    } else if(typeof prop == 'string' && typeof val !== 'undefined' && prop == 'class'){
      this.trigger('changeClass');
    }
    return this;
  }
});