JQuery does not execute on $(document).change()

Question

I need to make some JQuery execute when the page/document has changed - in this case, when a div with a specific CSS class is displayed.

I have the following JQuery code:

   <script>
           $(document).change(function () {
               if ($('.validation_errors').length) {
                   alert("test");
               }
           }
    </script>

However, it does not execute and display the alert. Am I missing something here?

`change` event is never fired on `document`. It is restricted only to inputs, textareas and selects. What exactly do you want to achieve? What do you mean by "page/document change"? — freakish, Sep 19 '12 at 12:57
More to the point, the `change` event isn't fired in response to DOM changes. A handler on document *will* catch `change` events fired on inputs inside the document, but this question is nothing to do with `change` events — Gareth, Sep 19 '12 at 13:02

noj · Accepted Answer · 2014-05-22T12:50:53.643

25

Change is only for input, textarea or select elements. Instead you need to bind a function to the DOMSubtreeModified mutation event:

$(document).bind('DOMSubtreeModified', function () {
   if ($('.validation_errors').length) {
       alert("test");
   }
});

EDIT: If your target browsers support it, you should use a MutationObserver instead.

edited May 22 '14 at 12:50

answered Sep 19 '12 at 13:00

noj

6,740
1
25
30

1

Probably a bad idea to use `DOMSubtreeModified`, please see http://stackoverflow.com/a/6659678/733347. Unfortunately it isn't implemented cross-browser – Josh Davenport-Smith Sep 19 '12 at 13:05
I waiting till someone posted that :p The truth is that although deprecated there's little alternatives out there to something that works in _most_ browsers (although that link you posted from the jQuery forums is interesting and something I'll give a go, thanks for that). – noj Sep 19 '12 at 13:13
@Aravin You should use [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) instead – noj Jun 04 '17 at 16:52

score 2 · Answer 2 · edited May 23 '17 at 12:31

You can't monitor changes in the DOM is this manner. Quote from the jQuery docs:

The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. - http://api.jquery.com/change/

If you're looking to execute code when there is a DOM change, you may need to either set up and interval which checks the DOM or use this technique provided by a poster on the jQuery forums.

There is the DOMSubtreeModified event, but it is scarcely available in current browsers, so I personally wouldn't recommend its use. See this stackoverflow answer for further details on that

score 0 · Answer 3 · edited May 06 '14 at 15:45

0

Your syntax is wrong too buddy! If you're going to do it, do it within document ready, .change is very limited and wont fire on a new page.

$(document).ready(function(){
    if($('.classOrId').length){
        //do something if it exists
    };
});

edited May 06 '14 at 15:45

Zong

6,160
5
32
46

answered Sep 19 '12 at 12:59

Shannon

570
1
6
14

JQuery does not execute on $(document).change()

3 Answers3

Linked