jquery .click pass parameters to user function

Question

I am trying to call a function with parameters using jquery .click, but I can't get it to work.

This is how I want it to work:

$('.leadtoscore').click(add_event('shot'));

which calls

function add_event(event) {
    blah blah blah }

It works if I don't use parameters, like this

$('.leadtoscore').click(add_event);
function add_event() {
    blah blah blah }

But I need to be able to pass a parameter through to my add_event function.

Has somebody done this specific thing before? I know I can use .click(function() { blah }, but I call the add_event function from multiple places and want to do it this way.

Thank you!

Answer 1

You need to use an anonymous function like this:

$('.leadtoscore').click(function() {
  add_event('shot')
});

You can call it like you have in the example, just a function name without parameters, like this:

$('.leadtoscore').click(add_event);

But the add_event method won't get 'shot' as it's parameter, but rather whatever click passes to it's callback, which is the event object itself...so it's not applicable in this case, but works for many others. If you need to pass parameters, use an anonymous function...or, there's one other option, use .bind() and pass data, like this:

$('.leadtoscore').bind('click', { param: 'shot' }, add_event);

And access it in add_event, like this:

function add_event(event) {
  //event.data.param == "shot", use as needed
}

Answer 2

If you call it the way you had it...

$('.leadtoscore').click(add_event('shot'));

...you would need to have add_event() return a function, like...

function add_event(param) {
    return function() {
                // your code that does something with param
                alert( param );
           };
}

The function is returned and used as the argument for .click().