Form submit button event is not captured when keyboard is up iOS 7

Question

I'm building an web app using cordova targeting iOS. I have this form

<form id="formID">

  <div class="row">
    <input type="text" name="something1" placeholder="something1" class="form-control" required maxlength="26" />
  </div>

  <div class="row">
    <input type="text" name="something2" placeholder="something2" class="form-control" pattern=".{6,6}" required />
  </div>

  <div class="row">
    <input type="submit" value="Submit" class="button btn-primary" />
  </div>

</form>

In my javascript I then have a listener for the submit event.

My problem is that when the keyboard is showing in iOS, clicking the submit buttons doesn't always trigger the submit event. Somethimes it works the first 2 times but then stops working. Anyone that has run in to this before?

As it is now you may need to first click "Done" on the keyboard (making it disappear) and then use the submit button. Or, click the submit button with the keyboard showing which will make the keybpoard hide and then click the submit again.

Any ideas?

EDIT

It works fine on iOS 6, but on iOS 7 the submit button doesn't trigger an event after the first 2 clicks.

Answer 1

So I solved the problem I was having. As stated in the question it worked fine for ios6 and android. But for ios7 I noticed when I increased the height of the text fields above the submit button I got the bug described above. When I didn't add any non-default styling that effected the height of the elements above the submit button worked. Weird right.

But then I read this question.

So instead of having a submit button and having my script wait for the submit event to fire, I changed the button to a link and listened for a touchend event. Bam, it worked like a charm.

$(document).on('touchend', 'form #button', function (e) {
    $('#formID').submit();
});

So I let this event bypass and trigger the submit event so that clicking the "Go" button on the keyboard still trigger a submit function.