Listen to changes within a DIV and act accordingly

Question

I have a function that grabs an XML document and transforms it according to an XSL document. It then places the result into a div with the id laneconfigdisplay. What I want to do is, separate to the transformation logic, setup a jQuery change event for that div so I can tell when it has changed, and run some jQuery code.

I have tried the following, but it does not work!

$(document).ready(function() {     $('#laneconfigdisplay').change(function() {         alert('woo');     });     //Do XML / XSL transformation here });  <!-- HTML code here --> <div id="laneconfigdisplay"></div> 

What am I doing wrong?

Answer 1

You can opt to create your own custom events so you'll still have a clear separation of logic.

Bind to a custom event:

$('#laneconfigdisplay').bind('contentchanged', function() {   // do something after the div content has changed   alert('woo'); }); 

In your function that updates the div:

// all logic for grabbing xml and updating the div here .. // and then send a message/event that we have updated the div $('#laneconfigdisplay').trigger('contentchanged'); // this will call the function above 

Answer 2

The change event is limited to input, textarea & and select.

See http://api.jquery.com/change/ for more information.