функция JavaScript вызывалась дважды на клавишу ввода нажмите

Question

У меня есть кнопка в моем HTML-странице

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

Я связанный приложением события JQuery щелчка на эту кнопку, как

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

Я также проверка ввода ключа нажмите чтобы вызвать ту же функцию ValidateLogin();, как показано ниже

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

вопрос, который я столкнулся является Whe n пользователь нажимает tab key, чтобы сфокусироваться на кнопке Login, а затем нажмите Enter Key. ValidateLogin() называется дважды. Как справиться с этой ситуацией.

Примечание: я не могу использовать тип = «отправить», чтобы сделать форму отправить ..since Я использую Ajax вызова на кнопку мыши

Answer 1

Вы должны использовать submit событие вместо этого. Ваш браузер вероятно обжиг click события при нажатии ввода и это фактически то же самое, что и нажатия кнопки отправки:

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

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

Второй причины, даже если ваш keypress был правильно работать, я могу нажать на кнопку, нажав пробел слишком.

Here is a full Fiddle для демонстрации.

Answer 2

Сво работает нормально проверить это стельку 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(); 
    }); 

Answer 3

Поскольку это форма, я бы предпочел, чтобы прикрепить событие на элементы формы, а не по документу.

Использовать элемент формы, такой как текст, текстовое поле и т. Д. При нажатии кнопки ввода следует отправить форму.

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

В вашем случае событие пузырится от кнопки к документу, поэтому оно вызывается дважды.