触发"click"和"enter"上的事件

Question

我的网站上有一个搜索框.目前,用户必须单击该框旁边的提交按钮才能通过jquery的帖子进行搜索.我想让用户也按Enter进行搜索.我怎样才能做到这一点？

JQUERY:

$('document').ready(function(){
    $('#searchButton').click(function(){
        var search = $('#usersSearch').val();
        $.post('../searchusers.php',{search: search},function(response){
            $('#userSearchResultsTable').html(response);
        });
    });
});

HTML:

<input type='text' id='usersSearch'  /><input type='button' id='searchButton' value='search' />

Answer 1

keypress在usersSearch文本框上使用事件并查找Enter按钮.如果按下输入按钮,则触发搜索按钮单击事件,该事件将执行其余工作.试试这个.

$('document').ready(function(){
    $('#searchButton').click(function(){
        var search = $('#usersSearch').val();
        $.post('../searchusers.php',{search: search},function(response){
            $('#userSearchResultsTable').html(response);
        });
    })
    $('#usersSearch').keypress(function(e){
        if(e.which == 13){//Enter key pressed
            $('#searchButton').click();//Trigger search button click event
        }
    });

});

演示

Answer 2

您可以.on()使用if函数内部调用两个事件侦听器:

$(function(){
  $('#searchButton').on('keypress click', function(e){
    var search = $('#usersSearch').val();
    if (e.which === 13 || e.type === 'click') {
      $.post('../searchusers.php', {search: search}, function (response) {
        $('#userSearchResultsTable').html(response);
      });
    }
  });
});

Answer 3

这样的东西会起作用

$('#usersSearch').keypress(function(ev){
    if (ev.which === 13)
        $('#searchButton').click();
});