Submit button does not trigger a jQuery bind'ed submit event on IE

Question

I have a problem with IE (8, have not tested on 7). I have a very simple situation: I create a form element

var formNode = $('<form>');

I attach a bunch of other elements to the form (fieldsets with input elements inside of tables). I then attach the form to the DOM, and then bind a submit handler:

formNode.bind('submit', function (ev) {
   alert('submit of form!');
   // do lots of stuff....
 }

This works with Safari on my Mac (yah, I'm a Mac guy), and on Safari and Firefox on Windows, but the alert is never called when I click the submit button when using IE 8. Instead, the browser tries to submit a GET request for / (I have not set either a Method or an Action for the form - perhaps that is necessary?).

Any insights would be greatly appreciated as I am making changes hit-or-miss in order to debug.

Answer 1

You haven't said what level of HTML you're using, but FWIW, action is a required attribute on form elements in HTML4. So it wouldn't be too surprising if a browser behaved oddly without it. (In HTML5, the validator says it's not required any longer, probably because some of this stuff is now allowed on the submit buttons themselves.)

Answer 2

Why have you bound the handler to the submit event of the form rather than the click event of the button?

Answer 3

Are you remembering to return false (or event.preventDefault()) from your event handler? If not, the form will continue to submit, effectively navigating you to the action URL, or the same URL as the current document, if there is none. Though really there should be some action both for HTML validity and to provide a working non-JavaScript solution where possible (progressive enhancement and all that).

If you do have the return false, make sure no JavaScript errors are occurring in the handler code that abort the function before it gets to return false. Turn on JS error reporting in the Internet Options and/or use the debugger.

Answer 4

There a variety of issues with listening for events from form elements with jQuery in Internet Explorer. There are a series of comments on the jQuery forum about: IE-specific issues with live ('submit'). Granted I know you are using bind and not live but many of the described problems involve attempts at using both.

I commented on your answer asking which version of jQuery you are using. If you haven't already and can do so I'd upgrade to the latest release.

A few code solutions:

Bind the submit handler to each child of the body element
adapted from synertech1 answer in the aforementioned jQuery forum discussion.

var submitHandler = function() { ... };

$("body").children().each(function() {
      $("form", this).bind("submit", submitHandler);
})

Bind to the submit input type
I hate this option because the form element is the more appropriate element to bind to.

 $('form > input[type*="submit"]').bind('click', function(event) {
     var form = $(this).parent;
     form.submit();
     event.preventDefault();
 });