JQuery UI click event fires twice on keypress

Question

HTML

Click Me!

JS

$(\'#clickMe\')         


        

Answer 1

I know it's an old post but while I was looking for a solution of a nearly identical problem I've found out that the default type of a element is "submit". This means that if you press Enter anywhere in the

containing this button, it will automatically submit.

Actually, if you press enter in any of those two input, the snippet closes. If you define a function to click a button on the Enter keypress event it will trigger twice unless you add a "button"to the button element, because you trigger it both with your function and the automatic submit.

TLDR: add type="button" to your button element.

$(document).ready(function(){
  
  $(document).on('click','#submit_type',function(){
    console.log($(this).attr('id'))
  });

  $(document).on('click','#button_type',function(){
    console.log($(this).attr('id'))
  });
});

Can enter

Cannot enter