Question

I have tried to boil this down to a simple example to demonstrate what I’m running into.

I have a form with an input field and a submit button:

<form id="focusOutAfterInputForm">
  <input type="text" id="focusoutAfterInput">
  <input type="submit" >
  <div></div>
</form>

The input field has a focusout handler attached that inserts a new element below the input:

jQuery("#focusoutAfterInput").focusout(function() {
  jQuery(this).after("<div>message</div>");
});

I have also attached a submit handler just to capture if the submit is run:

jQuery("form").submit(function() {
  jQuery("#console").append("<li>submitted form" + this.id + "</li>");
  return false;
});

If the cursor is placed into the input and the submit button is clicked, the submit handler does not fire. If the submit button is clicked a second time it will fire. Also, if the field is blur’ed and then the submit button is pressed it will fire.

However, if instead we insert the new element below the div in the form, the submit button will fire even though the element is inserted:

<form id="focusoutAfterDivForm" novalidate="novalidate">
  <input type="text" id="focusoutAfterDiv" required="true">
  <input type="submit" >
  <div></div>
</form>

jQuery("#focusoutAfterDiv").focusout(function() {
  jQuery(this).parent().last().after("<div>message</div>");
});

Here is a jsfiddle demonstrating the code. I’m a bit baffled. Ideas anyone?

Answer 1

The problem doesn’t seem to be that submit isn’t executed, but rather the click event isn’t executed on the button, because the mouseup isn’t on the submit button once the div is inserted. If you use tab and space in your fiddle it works. Also if you add the element in a way that the submit button doesn’t move, it works:

jQuery("#focusoutAfterInput").focusout(function() {
  jQuery(this).next().after("<div>message</div>");
});

or in this example: http://jsfiddle.net/K9vrW/3/