JQuery: how to name click functions?

Question

I have a script and I need to be able to name some of my anonymous click functions. For instance, here is some code:

Document ready:

$(function(){

$('#map').imagemap([
        {top_x: 1,top_y: 2,bottom_x: 290,bottom_y:380,callback: #id1 anonymous function},
        {top_x: 275,top_y: 2,bottom_x: 470,bottom_y:380,callback: #id2 anonymous function},
        {top_x: 460,top_y: 2,bottom_x: 701,bottom_y:380,callback: #id3 anonymous function}
    ]);

$('#id1').click(function() {
    ....
});

$('#id2').click(function() {
    ....
});

$('#id3').click(function() {
    ....
});
...
});

How do I write my callbacks so that I don't have to duplicate the code outside the document.ready? I tried putting it all inline, following the callback:, but it didn't work. So what do I put in place of my anonymous function callback calls?

are the functions all the same or are they different?

Jason
– Jason

2011-03-04 17:36:37 +00:00
Commented Mar 4, 2011 at 17:36 — Jason
– Jason, Commented Mar 4, 2011 at 17:36
They are three different click functions.

sehummel
– sehummel

2011-03-04 17:36:55 +00:00
Commented Mar 4, 2011 at 17:36 — sehummel
– sehummel, Commented Mar 4, 2011 at 17:36

Mike Cluck · Accepted Answer · 2016-05-20 22:16:58Z

12

It sounds like you want to have the click functions use a named function which is callable from elsewhere in the code. If so just define the functions outside the jQuery ready function and use them by name in the click method.

function id1Click() { 
  ...
}

...
$(function() {
  $('#id1').click(id1Click);
});

edited May 20, 2016 at 22:16

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

answered Mar 4, 2011 at 17:36

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

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

3 Comments

JasCav Over a year ago

@shummel7845 - Please make sure you accept @JaredPar's answer (click the checkmark to the left of his answer). This gives him reputation within the community and also helps other people easily find this answer if they have the same question. Thanks!

sehummel Over a year ago

Why do they make us wait before we can accept? Sometimes that's why I don't accept (or if they don't provide an answer).

JaredPar Over a year ago

@shummel7845 I believe it's an attempt to combat the 'fastest gun in the west' problem. meta.stackexchange.com/questions/9731/…

Babak Naffas · Accepted Answer · 2011-03-04 17:37:54Z

2

Instead of using an anonymous function like in your example

$('#id3').click(function() {
    ....
});

you can define your function elsewhere and use that function

$('#id3').click(myClickCallback);

function myClickCallback{
 ...
}

answered Mar 4, 2011 at 17:37

Babak Naffas

12.6k3 gold badges36 silver badges51 bronze badges

Comments

Ned Batchelder · Accepted Answer · 2011-03-04 17:36:40Z

1

function id1_click() { ... }
function id2_click() { ... }
function id3_click() { ... }

$(function(){

$('#map').imagemap([
        {top_x: 1,top_y: 2,bottom_x: 290,bottom_y:380,callback: id1_click },
        {top_x: 275,top_y: 2,bottom_x: 470,bottom_y:380,callback: id2_click },
        {top_x: 460,top_y: 2,bottom_x: 701,bottom_y:380,callback: id3_click }
    ]);

$('#id1').click(id1_click);
$('#id2').click(id2_click);
$('#id3').click(id3_click);
...
});

answered Mar 4, 2011 at 17:36

Ned Batchelder

378k77 gold badges583 silver badges675 bronze badges

1 Comment

sehummel Over a year ago

Thanks for the thorough answer, but Jared beat you to it.

Collectives™ on Stack Overflow

JQuery: how to name click functions?

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related