jquery on click event that call a named function

Question

I have a jQuery onClick handler, writed with an anonymous function like that:

$("#selector").on("click" function(){
    // do something
})

I would generalize the anonymous function extracting the logic in a named function, that drive me to something like:

$("#selector").on("click" namedFunction())

function namedFunction(){
    // do something
}

To me seemed a good solution. But there's a drawback since the namedFunction is executed as soon script is loaded. Here you can test the bad behaviour.

Rajaprabhu Aravindasamy · Accepted Answer · 2014-03-06 09:44:35Z

17

Just pass the reference of that function itself.

Try,

$("#selector").on("click", namedFunction);

edited Mar 6, 2014 at 9:44

answered Mar 6, 2014 at 9:30

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

3 Comments

BAD_SEED Over a year ago

And what if I need to send parameters to that function?

kakoma Over a year ago

The parameters are sent by default; in this case for example, the event is sent as a parameter to namedFunction

TechDogLover OR kiaNasirzadeh Over a year ago

@BAD_SEED to send parameters look at here

Felix · Accepted Answer · 2014-03-06 09:31:09Z

5

You don't need the () for your function here:

$("#selector").on("click", namedFunction)

answered Mar 6, 2014 at 9:31

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Comments

Holden Chev · Accepted Answer · 2019-11-03 08:35:41Z

3

Or a shorter version

$("#selector").click(namedFunction);

answered Nov 3, 2019 at 8:35

Holden Chev

1099 bronze badges

Comments

Lukas C · Accepted Answer · 2020-05-11 08:32:10Z

2

To pass custom parameters to namedFunction use:

$("#selector").on("click", null, {param1: param1}, namedFunction);


namedFunction(event) { console.log(event.data.param1); }

answered May 11, 2020 at 8:32

Lukas C

4531 gold badge4 silver badges15 bronze badges

Comments

Anoop Joshi P · Accepted Answer · 2014-03-06 09:32:10Z

1

try like

function namedFunction(){
alert("Hello world!")
}
$("#clickTester").on('click', namedFunction)

Updated Fiddle

answered Mar 6, 2014 at 9:32

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Comments

Jaykumar Patel · Accepted Answer · 2015-06-17 11:50:06Z

1

Named function[view jsFiddle]

Function namedFunction () {
    alert("Hello world!");
}
$("#clickTester").on('click', namedFunction);

Anonymous function [view jsFiddle]

$("#clickTester").click(function(){
   alert("Hello world!");
});

edited Jun 17, 2015 at 11:50

answered Mar 6, 2014 at 9:34

Jaykumar Patel

27.7k12 gold badges79 silver badges76 bronze badges

Collectives™ on Stack Overflow

jquery on click event that call a named function

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Named function[view jsFiddle]

Anonymous function [view jsFiddle]

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

Named function[view jsFiddle]

Anonymous function [view jsFiddle]

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related