Объединить несколько событий

Question

У меня есть текстовое поле и кнопка. Либо при нажатии кнопки или введите, то функция должна быть выполнена.

Предназначен для подходов. Однако можно ли объединить эти 2 функции (click и keypress), так что у меня есть только 1?

$("button").click(function() { 
    getInput(); 
}); 

$("#name").keypress(function(e) { 
    if (e.which == 13) { 
    getInput(); 
    } 
}); 

function getInput() { 
    alert($("#name").val()) 
} 

Поэтому мне нужно просто добавить эти события.

Here is a fiddle.

Answer 1

Вы можете прослушивать несколько событий с помощью .on('listOfEvents')

Для того, чтобы проверить, когда вам нужно запустить функцию, вам понадобятся дополнительные правила.

$("button, #name").on('click keypress', function(e) { 
 
    if ($(e.currentTarget).attr('id') == 'submit' || e.which == 13) { 
 
\t \t getInput(); 
 
    } 
 
}); 
 

 
function getInput() { 
 
    alert($("#name").val()) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="name" /> 
 
<button id="submit"> 
 
    OK 
 
</button>

Answer 2

function getInput(){ 
 
    return $(".result").text($("input").val()); 
 
} 
 

 
$("form").on("submit", (ev)=>{ 
 
    ev.preventDefault(); 
 
    // handle submission 
 
    getInput(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action=""> 
 
    <input type="text" /> 
 
    <button>ok</button> 
 
</form> 
 
<div class="result"></div>

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

HTML

<form action=""> 
    <input type="text" /> 
    <button>ok</button> 
</form> 

Javascript

$("form").on("submit", (ev)=>{ 
    ev.preventDefault(); 
    // handle submission 
    getInput(); 
}) 

Answer 3

@eltonkamami ответ одна идея и моя идея состоит в том, чтобы обеспечить такой же класс как для поля и кнопки ввода, как это:

(Но, это будет вызывать всякий раз, когда входное поле изменено)

$(".same").bind("click keypress", function() { 
 
    getInput(); 
 
}); 
 

 
function getInput() { 
 
    console.log($("#name").val()) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="name" class="same" /> 
 
<button id="submit" class="same"> 
 
    OK 
 
</button>

Hop е это помогает :)

Answer 4

$("button,#name").on("click keypress",function(e) { 
    //alert($(e.currentTarget).html()); 
    if (e.which == 13) { 
    getInput(); 
    }else if(event.type == 'click'){ 
    getInput(); 
    } 
}); 

function getInput() { 
    alert($("#name").val()) 
} 

Answer 5

Мы можем дифференцировать щелчок и нажатие на e.key или e.type параметров

Попробуйте это,

var getInput = function(e) {  
 
    if((e.which & e.which==13) || !e.key) 
 
    //e.key is a parameter for keypress event and not for click 
 
    alert($("#name").val()) 
 
} 
 

 
$("button").click(getInput); 
 

 
$("#name").keypress(getInput);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<input type="text" id="name" class="same" /> 
 
<button id="submit" class="same"> 
 
Click 
 
</button>