jQuery函数在按钮单击和输入/返回（键）上执行答案

【问题标题】：jQuery function execute on Button Click and Enter/Return (key)jQuery函数在按钮单击和输入/返回（键）上执行
【发布时间】：2012-06-01 22:39:09
【问题描述】：

我正在尝试创建一个小搜索框，让您可以根据您在输入字段中输入的关键字搜索 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>

【问题讨论】：

如果您实际使用<form> 元素，您将自动捕获return/enter 键并能够使用$.submit() 处理程序，但我假设您正在使用AJAX？
我试过这个方法，但没有成功。首先，我将 HTML 元素包装在 <form action=""> 中，并在我的 jQuery 中使用 $('#myFormsID').submit(function(){。结果似乎没有做任何事情。我是不是走错路了？

标签： jquery

【解决方案1】：

编辑：正如 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 - 先前的提案：

<input type="search" onkeydown="if(event.keyCode==13)$('#startSearch').trigger('click');" list="searchSugg" id="twitterSearch" placeholder="css3 animation" required aria-required="true"  >

【讨论】：

你可以这样做......但是使用 jQuery 的主要一点是避免你不得不使用嵌入在 HTML 标记中的事件触发器。也许改用jQuery的keydown() event？
虽然我真的很喜欢 Cyril 解决方案背后的想法，但当我尝试实现添加的功能时，它完全破坏了功能。这两种方法似乎都不起作用。我在这里遗漏了什么吗？
我收回...解决方案有效！非常感谢您的帮助。

【解决方案2】：

如果你想用不突兀的 js 来放置事件，那么你也可以使用这个系统：

$("#element").keydown(function(event) {
if (event.keyCode == 13) {
    // do stuff
}

如果你有一个提交按钮，这是一个替代方法，#element 必须是你想要捕获事件的文本字段。

对此的参考：answer

【讨论】：

【解决方案3】：

尝试为按键和鼠标点击创建侦听器。

function myFunction(e){
    if (e.which=='13' || e.type=='click'){
        // Run your code here
    }
}
$(document)
  .on('click', '#startSearch', myFunction)
  .on('keypress', this, myFunction);

在行动 http://codepen.io/scottyzen/pen/akWPJd

【讨论】：