jQuery 函数在按钮单击和输入/返回（键）上执行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10858178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery function execute on Button Click and Enter/Return (key)
提问by Alvin Jones
I'm trying to create a little search box that allows you to search Twitter based on the keyword you enter in the input field. While it's work, it only works if you press the Submit button. I would also like to be able to press the Enter or Return key to initiate the search. I've tried using the .sumbit function and wrapping my input around a form element with no success. Any insight would be greatly appreciate!
我正在尝试创建一个小搜索框，允许您根据您在输入字段中输入的关键字搜索 Twitter。当它起作用时，它仅在您按下提交按钮时起作用。我还希望能够按 Enter 或 Return 键来启动搜索。我尝试使用 .sumbit 函数并将我的输入包裹在表单元素周围，但没有成功。任何见解将不胜感激！
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
function(data) {
$('#startSearch').click(function(){
$('#tweets .results').remove();
var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'
$.getJSON(searchTerm, function(data) {
$.each(data.results, function() {
$('<div class="results"></div>')
.hide()
.append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
.append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
.append('<span class="userText">' + this.text + '</span>')
.append('<time class="textTime">' + relTime(this.created_at) + '</time>')
.appendTo('#tweets')
.fadeIn();
});
});
</script>
<body>
<label id="searchLabel" for="twitterSearch">Search</label>
<input type="search" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true">
<input id="startSearch" type="submit">
<datalist id="searchSugg">
<option value="css3 mulitple backgrounds">
<option value="html5 video">
<option value="responsive web design">
<option value="twitter api">
</datalist>
<div id="tweets">
</div>
</body>
回答by Cyril Tourist
EDIT: As Spudley suggested "one of the main points of using jQuery is to stop you having to use event triggers embedded in the HTML markup" so a better solution would be
编辑：正如 Spudley 所建议的“使用 jQuery 的主要目的之一是阻止您必须使用嵌入在 HTML 标记中的事件触发器”，因此更好的解决方案是
<script>
$(document).ready(function(){
function(data) {
$('#twitterSearch').keydown(function(event){
if(event.keyCode==13){
$('#startSearch').trigger('click');
}
});
$('#startSearch').click(function(){
$('#tweets .results').remove();
var searchTerm = 'http://search.twitter.com/search.json?q=' + $('#twitterSearch').val() + '&callback=?'
$.getJSON(searchTerm, function(data) {
$.each(data.results, function() {
$('<div class="results"></div>')
.hide()
.append('<a class="userPicLink" href="http://twitter.com/' + this.from_user + '">' + '<img class="userImg" src="' + this.profile_image_url + '">' + '</a>')
.append('<span class="userName">' + '<a href="http://twitter.com/' + this.from_user + '">' + this.from_user + '</span>')
.append('<span class="userText">' + this.text + '</span>')
.append('<time class="textTime">' + relTime(this.created_at) + '</time>')
.appendTo('#tweets')
.fadeIn();
});
});
</script>
OR - Previous proposal:
或 - 先前的提议：
<input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true" >
回答by Andrea V. Abbondanza
If you want place event with not obtrusive js then you can use also this system:
如果您想要使用不显眼的 js 放置事件，那么您也可以使用此系统：
$("#element").keydown(function(event) {
if (event.keyCode == 13) {
// do stuff
}
also if you have a submit button, this is an alternative, #element must be the text field where you want catch the event.
此外，如果您有一个提交按钮，这是另一种选择，#element 必须是您想要捕获事件的文本字段。
reference to this: answer
参考这个：回答
回答by Scottyzen
Try create listeners for both key press and mouse clicks.
尝试为按键和鼠标点击创建侦听器。
function myFunction(e){
if (e.which=='13' || e.type=='click'){
// Run your code here
}
}
$(document)
.on('click', '#startSearch', myFunction)
.on('keypress', this, myFunction);
In action http://codepen.io/scottyzen/pen/akWPJd
