Possible to bind an event listener to a (hypothetical) onChangeInnerHTML event?

Question

In my app, I have an OL tag whose contents are changed by various other dynamic events. Is there some way to put a listener on that OL so that I can execute a function whenever its contents are altered in any way? In this example I need to update a count of items in the list which appears in another spot in the interface.

I am using jQuery if that helps.

The contents of the OL are being changed with OL.append() and LI.remove(), in case those methods have some special events that I don't know about

Thanks!

Answer 1

There's a plugin called livequery that will run code when elements are added to the DOM.

I assume li items are being added. With livequery, you can do something like this:

$('#myol li').livequery(function() {...});

It can also run code when items are removed:

$('#myol li').livequery(
     function() {...},  // Run when added
     function() {...}   // Run when removed
);

http://brandonaaron.net/code/livequery/docs

---

EDIT:

This assumes you don't have access to the code that is altering the DOM. If you do, Dan Herberden has a good solution.

Answer 2

In reference to J-P's statement, if you want it event driven you could use custom events..

$('#myDiv').bind('contentChange', function() {
   // do stuff
});

When you change the innerHTML of #myDiv:

$('#myDiv').html('new Html').trigger('contentChange');

but, er, not sure why ya'd want to..