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?

score 81 · Accepted Answer · answered Apr 26 '10 at 09:02

81

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

answered Apr 26 '10 at 09:02

Shiki

16,688
7
32
33

1

For some reason, $('#laneconfigdisplay').bind('contentchanged', function()... does not work. Using $(document).on('contentchanged', '#laneconfigdisplay', function(), as suggested by @AlbatrossCafe works. – Julia Zhao May 09 '17 at 18:55
yes , if we create that div in dynamically , we need to use this code$(document).on('contentchanged', '#laneconfigdisplay', function().. – Selva Ganapathi Jun 29 '18 at 11:29

score 14 · Answer 2 · answered Apr 26 '10 at 08:54

14

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

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

answered Apr 26 '10 at 08:54

kim3er

6,306
4
41
69

Ah... Doh. How Do I listen for changes within a div then... Or is it not possible? – Chris Apr 26 '10 at 08:58

score 11 · Answer 3 · answered Apr 26 '10 at 08:59

11

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...

answered Apr 26 '10 at 08:59

meo

30,872
17
87
123

2

Why would you check every 10 seconds when you could just fire an event when something actually changes? – dmackerman Nov 17 '11 at 21:40
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. – meo Nov 17 '11 at 22:39
4

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. – markedup Jun 08 '12 at 14:50
+1 @dmackerman, checking for changes every x seconds doesn't make sense except in situations that *really* need it. – Samy Dindane Mar 30 '13 at 14:24
1

This solution doesn't seem efficient. – Gnagy Feb 18 '14 at 14:03
@Gnagy its not for sure, but there is now other way, unless you can trigger some kind of custom event. – meo Feb 19 '14 at 12:05

score 8 · Answer 4 · answered Jul 11 '17 at 20:48

8

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.

answered Jul 11 '17 at 20:48

Mohd Abdul Mujib

13,071
8
64
88

This perfectly fit for me! Cheers :) – sathya seelan Mar 01 '19 at 12:15

score 3 · Answer 5 · edited May 23 '17 at 12:02

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?

score 1 · Answer 6 · answered Apr 27 '17 at 10:22

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');
});

score 0 · Answer 7 · edited Jun 20 '20 at 09:12

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...

Listen to changes within a DIV and act accordingly

7 Answers7

Linked