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?

Infrangible

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

Gratianna

For some reason, $('#laneconfigdisplay').bind('contentchanged', function()... does not work. Using $(document).on('contentchanged', '#laneconfigdisplay', function(), as suggested by @AlbatrossCafe works. – Ealing

yes , if we create that div in dynamically , we need to use this code$(document).on('contentchanged', '#laneconfigdisplay', function().. – Obed

Answer 2

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

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

Behlau

Ah... Doh. How Do I listen for changes within a div then... Or is it not possible? – Infrangible

Answer 3

http://api.jquery.com/change/

change does only work on input form elements.

you could just trigger a function after your XML / XSL transformation or make a listener:

var html = $('#laneconfigdisplay').html()
setInterval(function(){ if($('#laneconfigdisplay').html() != html){ alert('woo'); html = $('#laneconfigdisplay').html() } }, 10000) //checks your content box all 10 seconds and triggers alert when content has changed...

Noemi

Why would you check every 10 seconds when you could just fire an event when something actually changes? – Bolinger

how do you know, if something changes if it does not tigger any event? I gave the answer according to the given information in the Question. – Noemi

Constantly polling the DOM isn't a good idea. Changes should be reported only as and when they happen and in the context of where they happen, such as in @Shiki's 'bind' example. – Calcific

+1 @dmackerman, checking for changes every x seconds doesn't make sense except in situations that really need it. – Messer

This solution doesn't seem efficient. – Weese

@Weese its not for sure, but there is now other way, unless you can trigger some kind of custom event. – Noemi

Answer 4

Though the event DOMSubtreeModified is deprecated, its working as of now, so for any makeshift projects you can use it as following.

$("body").on('DOMSubtreeModified', "#mydiv", function() {
    alert('changed');
});

In the long term though, you'll have to use the MutationObserver API.

Cat

This perfectly fit for me! Cheers :) – Lafave

Answer 5

If possible you can change the div to an textarea and use .change().

Another solution could be use a hidden textarea and update the textarea same time as you update the div. Then use .change() on the hidden textarea.

You can also use http://www.jacklmoore.com/autosize/ to make the text area act more like a div.

<style>
.hidden{
display:none
}
</style>

<textarea class="hidden" rows="4" cols="50">

</textarea>


$("#hiddentextarea").change(function() {

alert('Textarea changed');

})

Update: It seems like textarea has to be defocused after updated, for more info: How do I set up a listener in jQuery/javascript to monitor a if a value in the textbox has changed?

Pinkney

Answer 6

Try this

$('#D25,#E37,#E31,#F37,#E16,#E40,#F16,#F40,#E41,#F41').bind('DOMNodeInserted DOMNodeRemoved',function(){
          // your code;
       });

Do not use this. This may crash the page.

$('mydiv').bind("DOMSubtreeModified",function(){
  alert('changed');
});

Hashim

Answer 7

There is an excellent jquery plugin, LiveQuery, that does just this.

Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.

For example you could use the following code to bind a click event to all A tags, even any A tags you might add via AJAX.

$('a').livequery('click', function(event) { 
    alert('clicked'); 
    return false; 
}); 

Once you add new A tags to your document, Live Query will bind the click event and there is nothing else that needs to be called or done.

Here is a working example of its magic...

Require