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
– freakish, Commented Sep 19, 2012 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
– Gareth, Commented Sep 19, 2012 at 13:02

noj · Accepted Answer · 2014-05-22 12:50:53Z

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, 2014 at 12:50

answered Sep 19, 2012 at 13:00

noj

6,7791 gold badge27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh Davenport-Smith Over a year ago

Probably a bad idea to use DOMSubtreeModified, please see stackoverflow.com/a/6659678/733347. Unfortunately it isn't implemented cross-browser

noj Over a year ago

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 Over a year ago

@Aravin You should use MutationObserver instead

Community · Accepted Answer · 2017-05-23 12:31:36Z

2

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

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Sep 19, 2012 at 13:04

Josh Davenport-Smith

5,5112 gold badges31 silver badges40 bronze badges

Comments

Zong · Accepted Answer · 2014-05-06 15:45:59Z

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 6, 2014 at 15:45

Zong

6,2585 gold badges34 silver badges46 bronze badges

answered Sep 19, 2012 at 12:59

Shannon

5701 gold badge6 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related