2

I have searched for this topic but couldn't find anything useful.

In my case I have a jQuery-ui button with a click event. This click event works fine, but it always gets invoked by pressing enter in a text-input-field.

Demo here: http://jsfiddle.net/vcfzJ/

Hope somebody can help. I made a workaround by checking event.target.nodeName.

Mischa
  • 42,876
  • 8
  • 99
  • 111
user1665455
  • 51
  • 1
  • 3

1 Answers1

3

This is because a button is by default a submitting element for the form, so pressing enter in the textbox submits the form.

<button>x</button> is equivalent to <button type="submit">x<button>

Use this to make the button a non-submitting element:

<button type="button">x</button>

However, it does seem strange that this would trigger the "click" event, since the button was not actually clicked, and the answer seems to be this:

https://stackoverflow.com/a/4763911/1300235

Community
  • 1
  • 1
Ivan Pintar
  • 1,861
  • 1
  • 15
  • 27
  • True, this will cause that pressing Enter will submit the form though (at least in Chrome) so such code is required: `$("form").submit(function() { return false; });` [live test case](http://jsfiddle.net/vcfzJ/2/) – Shadow The GPT Wizard Sep 12 '12 at 10:47
  • Yes, it will, but the OP did not specify if the Enter key should or shouldn't submit the form. Or the button, for that matter, because if the button should still submit the form, then my answer is completely wrong. – Ivan Pintar Sep 12 '12 at 11:00
  • Good point. Well, if the Enter should not submit, you have the solution for this at hand. – Shadow The GPT Wizard Sep 12 '12 at 11:01