jQuery .on keyup and blur firing onload only

Question

Problem: The blur and keyup events each fire once onload, and only onload. How can I get them to work correctly?

jQuery:

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

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

Macario

Answer 1

You are not assigning a function to keyup and blur, you're assigning the result of the execution of myFunction.

Change it like this:

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

DEMO

Botulinus

Do I really have to have an anonymous function first? – Macario

No, but it's the easiest way in this case. – Brnaba

Answer 2

You're not declaring the functions as callbacks, you're executing them and their return result is assigned as a callback (which doens't work).

Try this:

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

Janel

Answer 3

You need to pass a function as an argument.. you are passing the return value of the called function

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

---

Or you can convert your myFunction to a function generator

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

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

Demo at https://jsfiddle.net/gaby/GrMQX/6/

Finnegan

Is returning the function going to be slower than calling the anonymous function? – Macario

there is a negligible overhead once when you bind the event handlers.. after that the actual event handling is exactly the same. But it solves the issue of passing a parameter when binding .. (and not repeating the body function for each event you want to handle..) – Finnegan

Answer 4

You're actually executing the functions when you call them that way. Try this:

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

JSFiddle example

Loran

Answer 5

use with .on() Event

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

    });

Shabbygenteel