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?

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?

• javascript
• jquery

• are the functions all the same or are they different? – Jason Commented Mar 4, 2011 at 17:36
• They are three different click functions. – sehummel Commented Mar 4, 2011 at 17:36

3 Answers 3

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);
});

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{
 ...
}

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);
...
});