jQuery submit event handler only works once

I'm validating a simple form with jQuery 1.6 using a .submit() event handler that r开发者_开发百科eturns 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.

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'.

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.

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;
    }
  });

There is most likely another event handler being binded elsewhere. Get the chrome extension Visual Event to see, in detail, all handlers attached to the element to see what is blocking it.

Also, check to make sure there is no other Javascript interfering. For example, Web Forms (.NET) will often have callbacks or some related code to handle postbacks. Being new to .NET, it was not until I disabled the included scripts/libraries (to test and see) that the problem was resolved.