Pass arguments to a callback function in jquery click event

Question

Straight to the business:

I have a jquery event listener that looks like this:

$(".number").click(printNumber);

and a callback function:

function printNumber(number){
   console.log(number);
}

I was wondering if I could pass an argument to a callback so it will look something like this

$(".number").click(printNumber(number));

(I know that it immediately invokes that function, but still, is there a way to pass arguments to it)

Thank you in advance!

Answer 1

The clean way to handle this is to return a function:

function printNumber(number) {
   return function(e) {
       console.log(number);
   };
}

And then use:

$(".number").click(printNumber(number));

Answer 2

You can pass data to the callback directly as event.data in jQuery

$(".number").on('click', {number : 4}, printNumber);

function printNumber(event){
   console.log(event.data.number); // 4
}

Another way would be to use bind

$(".number").click(printNumber.bind($, 4));

function printNumber(number, event){
   console.log(number); // 4
}

But that would also change the callbacks this value