Событие клавиатуры jQuery запускается в неправильных полях ввода

Question

Я создаю простые формы без прямой отправки, чем раньше запускал скрипт.Таким образом, классический ввод не будет отправлять форму.Однако, поскольку пользователи часто нажимают кнопку ввода для отправки формы, я создаю простое расширение для нажатия клавиши ввода, которое вызывает скрипт при нажатии кнопки.

Например, у меня есть простая форма:

<form id="testForm">
  <input type="email" id="email" />
  <input type="password" id="pass" />
  <button id="btnLogin" type="button">Login</button>
</form>

И созданное мной расширение выглядит следующим образом:

(function($){
    $.fn.noEnter=function(options){
        let settings=$.extend({btn:""},options);
        function _init(){
            $(this).on("keypress",function(event){
                if(event.keyCode === 13) {
                    event.preventDefault();
                    $("#"+settings.btn).click();
                    return false;
                }
            });
        }
        this.each(function(){_init();});
        return{}
    };
}(jQuery));

Затем в скрипте я вызываю что-то вроде этого:

$("#email").noEnter({btn:"btnLogin"});
$("#pass").noEnter({btn:"btnLogin"});
$("#btnLogin").click(function(){
.....
});

И это работает. Проблема в том, что он работает дважды для каждого поля ввода.Похоже, другое поле ввода принимает событие нажатия клавиши (или нажатия клавиши).Или я что-то упустил?

Answer 1

Проблема в том, что this ссылается на объект окна в функции _init, чтобы избежать этой попытки, код ниже

(function($){
    $.fn.noEnter=function(options){
        let settings=$.extend({btn:""},options);
        var self = this;
        function _init(){
            $(self).on("keypress",function(event){
                if(event.keyCode === 13) {
                    event.preventDefault();
                    $("#"+settings.btn).click();
                    return false;
                }
            });
        }
        this.each(function(){_init();});
        return{}
    };
}(jQuery));

$("#email").noEnter({btn:"btnLogin"});
$("#pass").noEnter({btn:"btnLogin"});
$("#btnLogin").click(function(e){
    console.log('righty');
});

Есть рабочий пример jsfiddle , если вы хотите попробовать

Answer 2

use event.stopPropagation ();чтобы предотвратить дальнейшее выполнение.

$(this).on("keypress",function(event){
                if(event.keyCode === 13) {
                    event.stopPropagation();
                    event.preventDefault();
                    $("#"+settings.btn).click();
                    return false;
                }
            });