javascript - jQuery's .click - pass parameters to user function

ID : 10158

viewed : 22

Tags : javascriptjqueryfunctionparameter-passingjavascript

Top 5 Answer for javascript - jQuery's .click - pass parameters to user function

vote vote

99

For thoroughness, I came across another solution which was part of the functionality introduced in version 1.4.3 of the jQuery click event handler.

It allows you to pass a data map to the event object that automatically gets fed back to the event handler function by jQuery as the first parameter. The data map would be handed to the .click() function as the first parameter, followed by the event handler function.

Here's some code to illustrate what I mean:

// say your selector and click handler looks something like this... $("some selector").click({param1: "Hello", param2: "World"}, cool_function);  // in your function, just grab the event object and go crazy... function cool_function(event){     alert(event.data.param1);     alert(event.data.param2); } 

I know it's late in the game for this question, but the previous answers led me to this solution, so I hope it helps someone sometime!

vote vote

80

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 } 
vote vote

80

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().

vote vote

69

I had success using .on() like so:

$('.leadtoscore').on('click', {event_type: 'shot'}, add_event); 

Then inside the add_event function you get access to 'shot' like this:

event.data.event_type 

See the .on() documentation for more info, where they provide the following example:

function myHandler( event ) {   alert( event.data.foo ); } $( "p" ).on( "click", { foo: "bar" }, myHandler ); 
vote vote

55

Yes, this is an old post. Regardless, someone may find it useful. Here is another way to send parameters to event handlers.

//click handler function add_event(event, paramA, paramB) {     //do something with your parameters     alert(paramA ? 'paramA:' + paramA : '' + paramB ? '  paramB:' + paramB : ''); }  //bind handler to click event $('.leadtoscore').click(add_event); ... //once you've processed some data and know your parameters, trigger a click event. //In this case, we will send 'myfirst' and 'mysecond' as parameters $('.leadtoscore').trigger('click', {'myfirst', 'mysecond'});  //or use variables var a = 'first',     b = 'second';  $('.leadtoscore').trigger('click', {a, b}); $('.leadtoscore').trigger('click', {a}); 

Top 3 video Explaining javascript - jQuery's .click - pass parameters to user function

Related QUESTION?