jQuery .on keyup和blur事件在页面加载时触发

Question

问题： blur和keyup事件只会在页面加载时触发一次，如何使其正常工作？

jQuery:

function myFunction(text){
    alert(text);
}
$('#input1').on({
    keyup: myFunction('keyup'),
    blur: myFunction('blur'),
    focus: function(){console.log('focus!');}
});

Fiddle: https://jsfiddle.net/GrMQX/

- Mooseman

Answer 1

您没有将函数分配给 keyup 和 blur，而是将 myFunction 的执行结果分配了。

将其更改为以下内容：

$('#input1').on({
    keyup: function() { myFunction('keyup'); },
    blur:  function() { myFunction('blur'); },
    focus: function() { console.log('focus!'); }
});

演示

- Claudio Redi

---

我真的必须先有一个匿名函数吗？ - Mooseman

不是，但在这种情况下这是最简单的方法。 - Blazemonger

Answer 2

您没有将函数声明为回调函数，而是执行它们并将它们的返回结果分配为回调函数（这不起作用）。

尝试这样做：

  $('#input1').on({
    keyup: function() { myFunction('keyup') },
    blur: function() { myFunction('blur') },
    focus: function(){console.log('focus!');}
  });

- Nick Andriopoulos

Answer 3

您需要将一个函数作为参数传递，而不是传递调用函数的返回值。

function myFunction(text){
    alert(text);
}
$('#input1').on({
    keyup: function(){myFunction('keyup');},
    blur: function(){myFunction('blur');},
    focus: function(){console.log('focus!');}
});

或者，您可以将您的 myFunction 转换为一个函数生成器。

function myFunction(text){
   return function(){
       console.log(text);
   }
}

$('#input1').on({
    keyup: myFunction('keyup'),
    blur: myFunction('blur'),
    focus: function(){console.log('focus!');}
});

演示地址: https://jsfiddle.net/gaby/GrMQX/6/

- Gabriele Petrioli

---

返回函数会比调用匿名函数慢吗？ - Mooseman

一旦绑定事件处理程序，就会有可忽略的开销。之后，实际的事件处理完全相同。但它解决了在绑定时传递参数的问题。(而且不需要为每个要处理的事件重复函数体) - Gabriele Petrioli

Answer 4

当你以这种方式调用函数时，实际上正在执行函数。请尝试以下操作：

$('#input1').on({
    keyup: function(){myFunction('keyup')},
    blur: function(){myFunction('blur')},
    focus: function(){console.log('focus!');}
});

JSFiddle example

- j08691

Answer 5

使用 .on() 事件

$(document).on("keyup blur", "#input1", function(event)
    {       
    // your code        

    });

- Yasir Aslam