Jquery's .click - pass parameters to user function

javascript

event-handling

higher-order-functions

performance-optimization

byAlex Kataev·Feb 27, 2025

Directly invoke a function with specific parameters on a jQuery .click event by incorporating it within an arrow function:

$('#myElement').click(() => myFunction('Hello', 'World'));

function myFunction(param1, param2) {
    console.log('Hey you!', param1, param2); // Gossip level: Hey you! Hello World
}

This makes certain param1 and param2 are consistently relayed to myFunction every time #myElement is interacted with.

data property and event object

As of jQuery 1.4.3, we have access to a data map that can be delivered as the first argument to .click(). In essence, this crafty feature allows us to provide additional data directly to the event handler:

$('#myElement').click({param1: 'Hip', param2: 'Hop'}, function(event) {
    console.log('Just vibing with', event.data.param1, event.data.param2); // Output: Just vibing with Hip Hop
});

The data provided are snugly packed into the event object which can be retrieved through event.data.

.on() fires versatility at .click()

The .on() method is known for not being petty, easily letting you assign event handlers and take in parameters as an object:

$('#myElement').on('click', {param1: 'jQuery'}, function(event) {
    console.log('Who is the boss?', event.data.param1); // Output: Who is the boss? jQuery
});

Can handle multitude of event types and travel through the multi-verse of dynamically-injected elements.

.trigger() for simulated interactions

You want to simulate user interaction? .trigger() has you covered, passing custom parameters along the way. The users might not be real, but the clicks certainly will:

$('#myElement').trigger('click', [{param1: 'Simulated Param'}]);

Once you venture inside the event handler, you are good to go:

$('#myElement').on('click', function(event, params) {
    console.log("This isn\'t the Matrix, it's", params.param1); // Output: This isn't the Matrix, it's Simulated Param
});

Tackle scenarios like a ninja

Level up with higher order functions

Stack up functions neatly using higher-order functions that return an event handler:

function caterToClicks(param1) {
    return function(event) {
        console.log('Catch me if you', param1); // Catch me if you can!
    };
}

$('#myElement').click(caterToClicks('can'));

It keeps your syntax crisp and wraps parameters inside the handler, just like a sushi roll.

Playing with multiple parameters

To deal with more than one parameters across varied contexts, extend the caterToClicks function:

function caterToClicks(...params) {
    return function(event) {
        console.log('In the end, it\'s all', ...params); // In the end, it's all about style, grace, and speed
    };
}

// Pass as many parameters as you like
$('#myElement').click(caterToClicks('about', 'style', 'grace', 'and', 'speed'));

Now, the handler is like a buffet that accommodates any number of parameters.

Inline functions vs. event.data, the duel

While heroic in their quick implementation, inline functions like arrow functions or function() expressions can tire when performance is king:

// Hot tip: Not the best when performance is on stake!
$('#myElement').click(() => expensiveFunction('param'));

In high stakes, journeying on event.data can result in cheery performance as the function isn't reborn at every click:

// Spot on when optimisation is mission critical
$('#myElement').click({param: 'golden-value'}, function(event) {
        expensiveFunction(event.data.param); // computes golden value, becomes silent guardian of Gotham
});