jQuery submit event handler only works once

Question

I'm validating a simple form with jQuery 1.6 using a .submit() event handler that returns false when the form is not valid:

$(function() {
  $('#my-form').submit(function(event) {
    if (true) {  // for testing, always go through the failure path
      alert("Invalid entry");
      return false;
    } else {
      return true;
    }
  });
});

If the user has made a selection, the form's submitted properly. If the user hasn't made a selection, the alert is shown and the form isn't submitted (again, properly). The problem is that in this case, the submit button no longer works. In other words, once the failure case occurs, the user stays in the form but clicking on the submit button does nothing.

I've validated the HTML (no duplicate IDs, no names/IDs of "submit", "length", etc.). The form is loaded dynamically so testing with Firebug is a problem. Other event handlers on the form are working fine (e.g., I see alerts when a field value changes). Another oddity: I replaced "return false" with "event.preventDefault(); return true" but the form is still submitted. (I thought .preventDefault() would stop that.)

Any ideas?

EDIT: This approach works:

$(function() {
  $('#my-form :submit').click(function(event) {
    if (...validation stuff goes here...) {
      alert("Invalid entry");
      return false;
    } else {
      $('#my-form').submit();
    }
  });
});

I'd still like to find out what's wrong with my original.submit() event handler approach.

Answer 1

Your form is most probably reloaded with some ajax.

Since ajax reload only part of the page, the $(function() { yourCodeHere }); is not run again. So your onSubmit event handler is not re-attached to your form.

Use this technic to re-attach your onSubmit event handler to your form

$('body').on('submit','#my-form', function() {
    if (true) {  // for testing, always go through the failure path
      alert("Invalid entry");
      return false;
    } else {
      return true;
    }
}

We could translate to human language as "for any change in the body, re-attach the onsubmit event to element with id 'my-form'.

Answer 2

Please read this documentation to "$().on" method (this replaces .live())

http://api.jquery.com/on/

Check if your form is not recreated by some ajax method - if it is handler will be discarded.

Answer 3

if the form is loaded dynamically, you might try binding the event with .live() instead.

like this...

  $('#my-form').live('submit', function(event) {
    if (true) {  // for testing, always go through the failure path
      alert("Invalid entry");
      return false;
    } else {
      return true;
    }
  });