Workaround for IE's Non-Bubbly Submit Events

Question

I'm working on a large web application with a lot of AJAX whose event handling has gotten out of control. I'm trying to set up an event delegation system to manage all of it, but am wondering if there's a workaround for IE's non-bubbling form submits (there are a lot of forms that get inserted/updated via AJAX). The best thing I've come up with is executing a bit of javascript to reload submit handlers every time I get a response from an AJAX call, but this seems ugly. Any ideas?

Also, does anyone have a good reference for which events don't correctly propagate in different versions of IE? I've had trouble finding good information (though this other question has a bit).

---

A real example from the site: there is in-place editing of some user content. Doing event delegation, I would have the body listen for submit events and then see what element triggered the event and handle it accordingly. Since submits don't bubble in IE, this won't work. The $5 solution would be to do event delegation for all other events and handle submits using something like this in Prototype:

// call this onload:
$$('form').invoke('observe', 'submit', function(event) { /*delegate*/ });

But this won't work for forms that are created dynamically (I'd have to re-instantiate the handler every time as mentioned above), and the whole thing would just be nicer if I could "make" form submits bubble in IE and just do plain delegation everywhere (no special cases, etc).

Answer 1

Can you make the forms return false and just look for the CLICK event on the submit buttons instead of the form submit event? Then submit the forms programatically via your AJAX calls.

Answer 2

Rails 3 rails.js has solved this issue by detecting if the browser supports submit event bubbling, if not then bind the onSubmit method to the handler on the first focus event of the form. Pretty neat.

Check out

http://github.com/rails/rails/commit/f61d923d284062b4e4864d81c603157020198d06