CODEWITHSUNDEEP
javascriptjquery
user3191903
user3191903

Reputation: 245

How to Pass parameters to callback functions in Jquery?

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 ?

Upvotes: 0

Views: 166

Answers (7)

lashab
lashab

Reputation: 186

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

Upvotes: 0

Mehran Hatami
Mehran Hatami

Reputation: 12961

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

Upvotes: 0

akhan
akhan

Reputation: 16

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

Upvotes: -1

Eric
Eric

Reputation: 97691

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.

Upvotes: 0

tobyodavies
tobyodavies

Reputation: 28109

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

Upvotes: 1

Yuck
Yuck

Reputation: 50865

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

Upvotes: 2

scf1001
scf1001

Reputation: 251

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

Upvotes: 0

Related Questions