1

I'm having trouble referring to the event object in a jQuery function:

// Execute a function when an image with the arrow class is clicked
$('.arrow').bind('click',update_support);

// Function tries to refer to the calling image using $(this)
function update_support() {
  alert( $(this).src );
}

// Result: an alert of 'undefined'

This code does work, but it passes the "this" object to the function explicitly, and I feel like there must be a better way: 

$('.arrow').bind('click',update_support(this));

function update_support(obj) {
  alert( obj.src );
}

// Result: an alert with the src of the clicked image

Edit to make my question clearer: Why should I have to give any arguments to the function explicitly? From jQuery docs at http://api.jquery.com/category/events/event-object: "The event object is guaranteed to be passed to the event handler." My question is: if I don't pass it explicitly, where is it? ;) ?

Improve this question

3 Answers 3

Reset to default
2 
$('.arrow').bind('click',function(event){ update_support(event);} );

Untested, but that should pass a reference to the event into update_support.

Edit: You'd also need to modify update_support, obviously:

function update_support(evt) {
  alert( evt.target.src );
}
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

that'll work, but it looks like the OP wants the event.target inside of update_support() function as they want to get the src property
+1 for the edit, although the anonymous function wrapping update_support is not necessary - the event object will be passed as the first argument to it, a parameter is needed in the function signature to capture the value
well, you could reference it with using arguments like so arguments[0], but IMO it makes it slightly easier having a parameter to capture the argument value.
1

Instead of:

alert( $(this).src );

Try:

alert( this.src );

$(this) is a jQuery object. this is a DOM element.

Improve this answer

2 Comments

Didn't work - still returned undefined. :( Since jQuery is calling the function, and (maybe) passing in arguments such as which object triggered the function, why wouldn't a jQuery object make sense?
@Summer - Because src is not a property of a jQuery object. If you really wanted to wrap this (which is the element on which the event is raised) in this context, then you would use $(this).attr('src') to get the value of the src property. That's a lot of unnecessary wrapping and function calls though.
1

As an alternative to both inkedmn's and J-P's answers

// Execute a function when an image with the arrow class is clicked
$('.arrow').bind('click',update_support);

// Function tries to refer to the calling image using $(this)
function update_support(e) {
  alert( e.target.src );
}

e in this case is the event object (normalised across browsers)

If you don't define a parameter for the event object argument explicitly in the event handler signature, the event object can be referenced using arguments

// Execute a function when an image with the arrow class is clicked
$('.arrow').bind('click',update_support);

// Function tries to refer to the calling image using $(this)
function update_support() {
  alert( arguments[0].target.src );
}

But in my honest opinion, it would make the code easier to read by explicitly defining a parameter for the event object argument.

Improve this answer

5 Comments

I tried this, but my browser reports that e is undefined when it's not passed explicitly.
what do you mean when you say it's not passed explicitly? do you mean removing the parameter from update_support function signature? In this case, e would be undefined as it is not defined anywhere (excluding the notion that a variable e may be declared in parent scope).
Agreed. I meant when I don't use .bind('click',update_support(this)) and instead try using .bind('click',update_support) or .bind('click',update_support(event)) -- it doesn't work. Perhaps I'll just go with what works on this one and leave prettier syntax for later. :)
I've given you the de facto answer though!
I agree - "it would make the code easier to read by explicitly defining a parameter for the event object argument" :) Thanks for bearing with me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.