CODEWITHSUNDEEP
jquerycssasp.net-mvc
Theomax
Theomax

Reputation: 6810

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

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?

Upvotes: 9

Views: 34914

Answers (3)

noj
noj

Reputation: 6759

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.

Upvotes: 25

Shannon
Shannon

Reputation: 570

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

Upvotes: 0

Josh Davenport-Smith
Josh Davenport-Smith

Reputation: 5511

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

Upvotes: 2

Related Questions