How to Pass parameters to callback functions in Jquery?

Question

I have a function like this

$("#button1").on("click", clickEvent);

function clickEvent(someParameter){
  console.log(someParameter);
}

How Can I pass some value (for ex: 1) to clickEvent function in that situation ?

Answer 1

From the jQuery API Documentation :

If a data argument is provided to .on() and is not null or undefined, it is passed to the handler in the event.data property each time an event is triggered. The data argument can be any type, but if a string is used the selector must either be provided or explicitly passed as null so that the data is not mistaken for a selector. Best practice is to use a plain object so that multiple values can be passed as properties.

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

Answer 2

The arguments are always the event, but you can use a closure to get more data into your callback

$("#button1").on("click", function(){clickEvent(1);});

function clickEvent(someParameter){
  console.log(someParameter);
}

Answer 3

You don't control which parameters get passed. It's always the event object which gets passed into the handler function.

Answer 4

You can also use Function.prototype.bind , but you'll lose the this argument:

$("#button1").on("click", clickEvent.bind(null, 1));

function clickEvent(someParameter){
    console.log(someParameter);
    // in here, `this` no longer refers to the button
}

Or use closures in a slightly different way:

$("#button1").on("click", makeClickEventHandler(1));

function makeClickEventHandler(someParameter){
    return function(event) {
        console.log(someParameter);
    }
}

But tobyodavies' answer is the most applicable solution here.

Answer 5

if the parameters are all like your example primitive and constant you can simply do this:

function addClickEvent(param){
    var clickEvent=Function('var param = "'+param+'"; alert(param);');
    $("#button1").on("click", clickEvent);
}
addClickEvent(1);

but it doesn't mean if your param is kinda object you can't do this. just the solution would differe, like:

function addClickEvent(param){
    window._allParams=[];
    var pindex =_allParams.push(param) - 1;
    var clickEvent=Function('var param =window._allParams['+pindex+']; alert(param);');
    $("#button1").on("click", clickEvent);
}

Answer 6

You can try this:

(function() {

 var args = arguments;

 function clickEvent(){
  return function(e) {
     return args; // [1,2,3,4];
  }();
 }

 keys.on('click',clickEvent);

})(1,2,3,4);

Answer 7

just pass value where you are calling it

$("#button1").on("click", function(){clickEvent("1");});

function clickEvent(someParameter){
  console.log(someParameter);
}

when you need to pass value through function, you must pass while calling it, where you are already defining it at "someParameter" that you may pass some values to function. "someParameter" will act as variable inside function.

you can also use this function like this

var somevar = "1";

$("#button1").on("click", function(){clickEvent(somevar);});

function clickEvent(someParameter){
console.log(someParameter);
}