Question

目前我有这个代码（效果很好）：

<form>
  <input type="text" />
  <a id="btn">add</a>
</form>

$(document).ready(function () {
  $('form').submit(foo);
  $('#btn').click(foo);
});

function foo() {
  //do some stuff
}

我目前正在将foo函数绑定到表单提交和锚点击。但是，我实际上更喜欢不使用该表单，尽管它似乎是将文本框上的回车键绑定到foo函数的最简单方法。

在一个语句中实现两个绑定的最简单方法是什么，没有表单，没有将文本框绑定到一个按键并检查keycode == 13？我可以为文本框上的回车键绑定一个内置事件吗？

用一些伪代码来解释，这大致是我想要的样子：

//get rid of the form
<input type="text" class="submit"/>
<a href="javascript:void(0)" class="submit" id="btn">add</a>

$(document).ready(function () {
  //and only have one binding statement
  $('.submit').bind('click enterPressed', foo);
});

function foo() {
  //do some stuff
}

Answer 1

对于您的enterPressed事件，您可以执行此操作。触发您的自定义活动：

$('#element').keyup(function(event) {
  if(event.which === 13) $('#element').trigger('enterPressed');
});

您可以使用.on（）将函数绑定到多个事件，包括自定义事件：

$('#element').on('click enterPressed', function() {
  ...
});

不确定代码。但它应该给你一些东西来查找。

Answer 2

没有名为enterPressed的现成活动或任何仅响应回车键的事件。 因此，简短的回答是，无法实现您所要求的。如果您打开创建自定义事件enterPressed，长答案在以下。

您可以在enterPressed元素上定义名为input的自定义事件，然后您必须阻止input元素响应任何点击事件：

$(function() {
   $('input.submit').on('keypress', function(e) {
       e.which !== 13 || $(this).trigger( 'enterPressed' );
   })
   .on('click',function(e) { e.stopImmediatePropagation(); });

    $('.submit').on('click enterPressed', foo);

    function foo() {
        console.log( 'foo called' );
    }
});

WORKING JS FIDDLE DEMO

jquery绑定表单提交和单个调用中的锚点

2 个答案: