jquery - JavaScript function getting called twice on Enter key press - Stack Overflow

admin管理员组

文章数量:1429658

I have a button in my html page

<input id="btnLogin" class="loginBtn" type="button" value="Login" title="Login" />

I have binded a jquery click event to this button like

 $('#btnLogin').click(function () {
    ValidateLogin();
});

I'm also checking the enter key press to call the same function ValidateLogin(); like below

$(document).keypress(function (e) {
    if (e.which == 13) {
        ValidateLogin();
    }
});

The issue that i'm facing is when the user presses the tab key to get in focus over the Login button and then press Enter Key the ValidateLogin() is called twice.How to deal with this situation.

Note : i can't use type="submit" to do a form submit ..since i'm using ajax call on button click

I have a button in my html page

<input id="btnLogin" class="loginBtn" type="button" value="Login" title="Login" />

I have binded a jquery click event to this button like

 $('#btnLogin').click(function () {
    ValidateLogin();
});

I'm also checking the enter key press to call the same function ValidateLogin(); like below

$(document).keypress(function (e) {
    if (e.which == 13) {
        ValidateLogin();
    }
});

The issue that i'm facing is when the user presses the tab key to get in focus over the Login button and then press Enter Key the ValidateLogin() is called twice.How to deal with this situation.

Note : i can't use type="submit" to do a form submit ..since i'm using ajax call on button click

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 8, 2014 at 8:25 iJade asked Jan 8, 2014 at 8:04 iJadeiJade 23.9k5858 gold badges161161 silver badges250250 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You should use the submit event instead. Your browser is probably firing the click event when pressing enter and that is effectively the same as pressing the submit button:

$("form").submit(function(e) {
    // Stop the form submitting
    e.preventDefault(); 
    ValidateLogin();
});

function ValidateLogin() {
    $.ajax({
        // ...
    }).done(function(e) {
        if(!e.valid) {
            alert("Invalid Login");
        }
    });
}

Second reason, even if your keypress was to work correctly, I can press a button by pressing spacebar too.

Here is a full Fiddle to demonstrate.

Since it's a form I would prefer to attach event on form elements instead on document.

Use form element like text, textarea etc. on click of enter should submit the form.

$('input:text, textarea').keypress(function (e) {
    if (e.which == 13) {
        ValidateLogin();
    }
});

In your case event is bubbled from the button to document hence it is called twice.

Its working fine check this fiddler DEMO

      <input id="btnLogin" class="loginBtn" type="button" value="Login" title="Login" />

  $('#btnLogin').click(function () {
      //ValidateLogin();
      alert('click');
  });
  $(document).keypress(function (e) {
      if (e.which == 13) {
          //ValidateLogin();
          alert('enter');
      }
      e.preventDefault();
  });

本文标签： jqueryJavaScript function getting called twice on Enter key pressStack Overflow