Question

I was wondering if there was a way to do something like this:

 $("form").prepend('<div class="errors"></div>');

to every form that is currently on the page and any form that will be loaded in later (using ajax) or added by js.

Something similar to:

 $("form").live("submit",function(){
     $("form").prepend('<div class="errors"></div>');
 })

Without having to manually (re)apply the wanted actions on loading some ajax.

Cheers!

Answer 1

There’s not really a good, cross-browser solution for this. There are the mutation events such as DOMNodeInsertedIntoDocument and DOMSubtreeModified, however they’re not supported in IE or Firefox, and in any case, they are deprecated, so it’s not a great idea to rely upon them.

I would suggest revisiting the ‘manual’ approach. You should probably know when you are modifying the document, (eg: retrieving some HTML via AJAX and inserting it), so you can perform whatever action you need at that point in time.