Question

I have a function that looks for the existence and count of the class .dirty on a webpage. It would have to start at a certain point but at that point, I’d like for jQuery to observe for css changes in the DOM and rerun this function. Is this possible? Could I use on() for this? Like:

$(document).on('change','.dirty', dosomething);

although I know that’s different than what change is used for. Basically, the change I want is any addClass or removeClass for ‘dirty‘.

sample markup

looking for observing both adding / removing .dirty on ‘top-level-menu’ so that I can propogate change

<div class="top-level-menu dirty" data-menu-global-id="12828">
  <input id="menu-name-global-id-12828" size="30" type="text" value="Some value here">
</div>

Answer 1

.on would be perfect for this function, however I would try to be a little more specific about where you are expecting “.dirty” to happen. For example, if you know that dirty will only happen in the nav, only watch nav.

$('nav').on('change', '.dirty', function(e) {
    doSomething(e); 
});

View the jsFiddle.