jQuery的.focus()回调函数无法工作

Question

我就是不理解，为什么这种 .focus 回调的方式不起作用呢？

$('a.focus').click(function(){
    $('form input:first').focus(function(){
        console.log('done focus');         
    });
});  

实时演示：http://jsfiddle.net/SHxbj/

我在这里做错了什么吗？

- devjs11

Answer 1

为什么不这样做呢：

$('a.focus').click(function() {
    $('form input:first').focus();
});
$('form input:first').focus(function() {
    console.log('focused');
});​

第一部分将点击链接与聚焦输入框绑定，第二部分将聚焦事件绑定到输入框并将消息发送到控制台。

请查看jsFiddle示例。

- j08691

---

这样做只会关注负载，而不是目标。 - devjs11

不是这样的。你试过jsFiddle了吗？输入框上的focus调用是绑定，而不是触发。 - j08691

@Alex 根据那种逻辑，代码也会在加载时触发锚点的点击，但实际上并没有发生。（那种逻辑是错误的，这个答案是正确的。） - Evan Davis

好的，抱歉没看到。到目前为止看起来很棒，这样我们可以检测到焦点事件并调用所需的内容。 - devjs11

Answer 2

$('form input:first').focus(function(){
    console.log('done focus');         
});

这段代码将事件绑定到第一个表单输入框，而不是在链接被点击时执行焦点回调函数。你的代码按照预期工作，但可能不是你想要的方式。试着先点击链接，然后再点击第一个输入框。

你可能想要这样实现：

$('form input:first').focus();
console.log('done focus');

- simshaun

---

我的想法是先点击链接，然后进行焦点操作，在焦点完成后调用回调函数。有什么解决方法吗？ - devjs11

问题在于我不想关注页面加载。只有在链接被点击后才触发。你点击链接后，自动滚动到表单并进行焦点设置。就这么简单。 - devjs11

你仍然将那最后两行代码包裹在 $('a.focus').click(function() { ... }); 中。 - simshaun

Answer 3

你的代码将回调绑定到“focus”事件，但实际上并没有聚焦元素。你可以将其保留为回调并手动聚焦元素，或者在聚焦后简单地触发它：

编辑; 感谢@GNi33指出重复绑定！

var $input = $('form input:first');
$input.focus(function(){
    console.log('done focus');         
});

$('a.focus').click(function(){
    $input.focus();
});  

- Evan Davis

---

但是这样做会在每次单击链接时绑定一个“focus”处理程序。我建议将其与单击处理程序分开绑定。 - GNi33

Answer 4

$('a.focus').click(function(){
    $('form input:first').focus(function(){
        console.log('done focus');         
    }).focus();
});  
​

代码咯

- adeneo