jquery - How to call event handler, when a new class is added to any <li> element in a list? -

i'm current creating wizard. wizard tab in can in 3 states "current", "completed", "upcoming".

i know how trigger event when html element has state changed.

e.g.

<ul role="tablist">     <li class="current">step 1</li>     <li class="upcoming"> step2</li>     <li class="upcoming">step 3</li>     <li class="upcoming">step 4</li> </ul> 

so example user on step1. when user clicks on step2. step1 have state replaced "current" "completed" , step 2 "upcoming" "current"..

<li class="complete">step 1</li> <li class="current"> step2</li> 

etc

because i'm using 3rd party js file.. 'm reluctant go through 800 lines of code creating triggers everytime class added

element. how can trigger event, or watch, when new class added of

i using knockoutjs way, new it.

viewmodel

function createquoterequestviewmodel(addresses, countermessger) {   var _packageheight = ko.observable(""); var _packagewidth = ko.observable(""); var _packagelength = ko.observable(""); var _packagevolume = ko.observable(""); var _packageweight = ko.observable("");  function additemshowdisplay() {     $('#additem').animate({         opacity: '1'     },1000);      _disableinputelement(false); }    .. other code  return {      packageheight: _packageheight,     packagequantity: _packagequantity,     packagewidth: _packagewidth,     packagelength: _packagelength,     packagevolume: _packagevolume,     packageweight: _packageweight,     // , other code  } 

calling viewmodel

          var viewmodel = new createquoterequestviewmodel(array, countermessger);           ko.applybindings(viewmodel); 

you can use mutation observer watch changes on dom element.

example docs:

// select target node var target = document.queryselector('#some-id');  // create observer instance var observer = new mutationobserver(function(mutations) {     mutations.foreach(function(mutation) {         console.log(mutation.type);     });     });  // configuration of observer: var config = { attributes: true, childlist: true, characterdata: true };  // pass in target node, observer options observer.observe(target, config);  // later, can stop observing observer.disconnect();