Question

I have written JQuery that adds a CSS attribute to a button when it detectes an element with a specific CSS class: (in this case, when a validation div is displayed on a page)

  <script>
        $(document).bind('DOMSubtreeModified', function () 
        {
            if ($('.errors').length)
            {
            alert('test');
            }
        });
    </script>

The alert is displayed in every browser (including IE8 and 9) but not IE7 – is this a known issue? Does anyone know of an alternative that could be used?

Edit: I have discovered IE7 can’t execute ‘DOMSubtreeModified‘. And I can see there are alternatives but the javascript needs to be called automatically and detect when a change has occurred, and not executing it using a call to a function. Any suggestions?

Another Edit: As it’s a .NET MVC website, I can’t see how to add a javascript call to the validation binding. Is there a way for javascript to detect changes on the whole page? i.e javascript code that can do the same as the above code?

Answer 1

If it only gets called when there’s a validation error, then why use such a broad event as DOMSubtreeModified? I would use a custom event like this:

function validate() { 
  var error = false;
  //....
  //your validation code that finds an error
  if(error) {
    $(document).trigger('validationError');
  }
  //.....
}


$(document).on('validationError',function() {
   //your code that does something when an error is found
});