How to detect if DOM element attribute changes based on an event?

How to detect if DOM element attribute changes based on an event?

Anyone knows of a way to detect when a DOM attribute changes with jQuery?

For example,  I have the following HTML code..

  1. <div id="ctl00_ctl00_cphMain_cphMain_upoCategories_uprProgress" style="display: none; position: absolute; z-index: 100000; width: 723px; height: 1014px; left: -50000px; top: -50000px;" role="status" aria-hidden="true" class="updateProgress">
  2.         <div style="position: absolute; left: 353px; top: 299px;">
  3.             <img id="ctl00_ctl00_cphMain_cphMain_upoCategories_imgUpdating" src="http://maxcdn.nexternal.com/Shared/StoreFront/Images/updating.gif" alt="Updating" style="border-width:0px;">
  4.         </div>
  5. </div>

If a dropdown select value changes, this code will generate display:visible for 5 - 10 seconds, then go back to display:none.

How can I detect when the sequence is over and it turns back to display:none again?


I tried using the following function....

  1. $('.updateProgress').live('DOMAttrModified',function(e){
  2. console.log('something has changed and..'+ $(this).css('display'));
  3. });

But it doesn't work for me.  The page I am working on has to use jQuery 1.6., which is why I am not attempting to use the .on method.

Thanks for any advice!

*Break through the ice and never look back*