Running jQuery declared function with .on function

Question

Currently this function works:

    $("#email_address_input").on('focusout', function(){
        emailValidationCheck($(this));
    });

    function emailValidationCheck(e){
        ...
    }

So basically, if the email address input element is focused out, then an anonymous function runs, which calls the declared function emailValidationCheck (and of course, that declared function takes as an argument the email address input element).

That anonymous function feels redundant. All it does is call the declared function, so it seems to me like it should be taken out.

So, what I tried to do was call the declared function directly upon the event firing, as opposed to calling the anonymous function, which in turn calls that declared function. Like this (warning, it doesn't work as expected):

    $("#email_address_input").on('focusout', emailValidationCheck($(this)));

Question: How can I get this to work? Or is the original answer best practice? Basically what I am trying to do is: when the focusout event fires off on the specified element, I want to execute the emailValidationCheck function, where the passed in argument is the element where this all this stuff is happening on.

Thanks!

you could paste everything from the emailValidationCheck function to the anonymous function in the .on() — skip405
– skip405, Commented Mar 9, 2015 at 13:59

BenM · Accepted Answer · 2015-03-09 14:06:03Z

4

You don't need to use anonymous functions as callbacks for events. You can easily call a defined function without using the () precursor (because including that will essentiall pass the return value of emailValidationCheck to the callback, rather than the function reference itself). For example:

$("#email_address_input").on('focusout', emailValidationCheck);

Now, your emailValidationCheck function will receive the event in the e variable that you define in the function constructor.

Because the function has been bound as a callback, $(this) is also available within it. For example:

function emailValidationCheck(e)
{
    console.log( e );       // logs the event
    console.log( $(this) ); // logs the jQuery object that lost focus
}

jsFiddle Demo

edited Mar 9, 2015 at 14:06

answered Mar 9, 2015 at 13:59

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Neil Over a year ago

what about the argument for the emailValidationCheck function? Doesn't it have to be specified when I call it? How can I refer to that argument when I am within the emailValdiationCheck function?

BenM Over a year ago

@Neil No you don't. jQuery automatically passes the event to the callback function, and passes the this variable to it, so it's within the scope of the callback. I was editing the answer when you commented. Please see the update.

James Sutherland · Accepted Answer · 2015-03-09 14:05:04Z

1

That's not how javascript works. The .on() function wants a function as a parameter. You can either pass an anonymous function or the name of a function. As soon as you put () at the end, it executes the function inline and passes the result to the .on() function.

answered Mar 9, 2015 at 14:05

James Sutherland

1587 bronze badges

Collectives™ on Stack Overflow

Running jQuery declared function with .on function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related