Accessing Parameters and Events in function from jQuery Event

Question

This is a follow-up question to a different question I asked not too long ago. Typically, you can access an event in a function call from a jQuery event like this:

$item.live("click", functionToCall);

and in the function:

function functionToCall(ev) {
  // do something with ev here, like check 'ev.target'
}

But what if I wanted to send a parameter to functionToCall() and access the event? So something like this, maybe? :

$item.live("click", functionToCall($(this));  // send over parameter this time

and

function functionToCall(ev, $clickedItem) {
  // both accessible here?
  alert(ev.type);
  alert($clickedItem.attr('id'));
}

Would that be acceptable, or is there a different way to send a parameter? Because this way doesn't seem right to me. Any help would be appreciated. Thanks.

CLARIFICATION: I realize that an anonymous callback function would allow me to access both, but for various reasons too lengthy to get into in this post, I need to use a function call rather than the anonymous function. So my question deals strictly with the scenario when an external function needs to be called. Thanks.

UPDATE: My original question presented the scenario of needing to pass $(this) as a parameter to the external function. As it turns out, $(this) will be accessible in the function without even needing to pass it, because of the way jQuery reassigns values to "this" based on events. So performing this code should work for my original question:

$item.live("click", functionToCall);

and

function functionToCall(ev) {
  alert(ev.type);
  alert($(this).attr('id'));  // display id of item that was clicked
}

However, as others have answered, there is a different scenario that involves needing to pass a different kind of variable over as a parameter, such as a simply string or int. In this case, as others have notes, it becomes more complicated. But there do seem to be sufficient answers here to satisfy this second scenario (namely, "currying"). Thanks.

Could you be more specific about what exactly the data is that you want to pass on? There may be a way to get it, but it might not be easy. The jQuery bind function has the ability to pass along extra data, but it doesn't appear that the live function can do the same. Do you NEED the live functionality, or would bind suffice? — Stephen Delano
– Stephen Delano, Commented Nov 25, 2009 at 18:11
I do need the live function, unfortunately. Since asking the question, I now know that if I wanted to access $(this) in the function, I simply need to reference $(this) b/c jQuery reassigns "this" based on what is being called. So calling functionToCall() with no parameters, then declaring it as functionToCall(ev) would allow me to access the event (via "ev"), and would allow me to refer to the item clicked simply by references $(this) in the function. However, I would be interested to know (and I think others as would as well) how to go about passing somethin other than $(this), like a string — MegaMatt
– MegaMatt, Commented Nov 25, 2009 at 18:32

Christian C. Salvadó · Accepted Answer · 2009-11-25 18:19:53Z

5

You can curry or partially apply your function:

Something like this:

function functionToCall($clickedItem) {
  return function (ev) {
    // both accessible here
    alert(ev.type);
    alert($clickedItem.attr('id'));
  }
}

Then you can use it like you want:

$item.live("click", functionToCall($(this));

Note: If you can't modify your original functionToCall because is "external", you can wrap it:

function wrapFunctionToCall($clickedItem) {
  return function (ev) {
    // call original function:
    functionToCall(ev, $clickedItem);
  }
}
// ...
$item.live("click", wrapFunctionToCall($(this));

edited Nov 25, 2009 at 18:19

answered Nov 25, 2009 at 18:14

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Moura · Accepted Answer · 2009-11-25 18:06:41Z

1

.live('click', functionA(prm) {
   return function(ev) {
     // here you can use the prm and the event
  }
}

answered Nov 25, 2009 at 18:06

Daniel Moura

7,9845 gold badges38 silver badges61 bronze badges

1 Comment

MegaMatt Over a year ago

@Daniel, thanks for the response. However, I should have been more clear that I need to use an external function call rather than the anonymous function declaration. I edited my question to reflect the clarification. Thanks.

Zack · Accepted Answer · 2012-12-25 05:05:31Z

0

I know the question's answered, but for what it's worth, here's a one-liner that works as well if you don't want to edit your original function(s):

$item.live("click", function() { functionToCall( $(this) ); });

answered Dec 25, 2012 at 5:05

Zack

1,71320 silver badges28 bronze badges

Collectives™ on Stack Overflow

Accessing Parameters and Events in function from jQuery Event

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related