jQuery .on keyup 和 blur 仅触发 onload答案

【问题标题】：jQuery .on keyup and blur firing onload onlyjQuery .on keyup 和 blur 仅触发 onload
【发布时间】：2013-05-20 16:37:59
【问题描述】：

问题： blur 和 keyup 事件在加载时触发一次，并且仅在加载时触发。我怎样才能让它们正常工作？

jQuery：

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

小提琴：https://jsfiddle.net/GrMQX/

【问题讨论】：

标签： jquery jquery-on

【解决方案1】：

您不是为keyup 和blur 分配函数，而是分配myFunction 的执行结果。

改成这样：

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

DEMO

【讨论】：

我真的必须先有一个匿名函数吗？
不，但在这种情况下这是最简单的方法。

【解决方案2】：

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

试试这个：

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

【讨论】：

【解决方案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/

【讨论】：

返回函数会比调用匿名函数慢吗？
绑定事件处理程序时的开销可以忽略不计。之后实际的事件处理完全相同。但它解决了绑定时传递参数的问题..（而不是为每个要处理的事件重复body函数..）

【解决方案4】：

当您以这种方式调用函数时，您实际上是在执行函数。试试这个：

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

JSFiddle example

【讨论】：

【解决方案5】：

与 .on() 事件一起使用

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

    });

【讨论】：