passing objects in jquery click event

Question

I have this all wrong and its not working.

I'm trying to call one shared function to alert data passed that is called from two different click events but |I get underfined in the alert. Why do I get underfined?

var myF = function(){
    alert('a click ' + this.model + ' ' + this.year); // meant to alert the properties of the object passed to it
    alert(this.ID); // meant to alert the ID of the click that called it
};

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

var myCar2 = mycar;
myCar2.make = "VW";
myCar2.model = "golf";
myCar2.year = 2000;


$('.feature1').click(myCar,myF);

$('.feature2').click(myCar2,myF);

edrian · Accepted Answer · 2014-04-24 18:16:12Z

2

In the callback, "this" refers to the element where you did the click. That function will receive your custom objects in the event parameter.

You could do it like this:

$('.feature1').click({myModel: myCar}, myF);
    var myF = function(e){
    var data = e.data.myModel;
    alert('a click ' + data.model + ' ' + data.year);
};

answered Apr 24, 2014 at 18:16

edrian

4,5315 gold badges34 silver badges35 bronze badges

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

Comments

Oriol · Accepted Answer · 2014-04-24 18:23:53Z

1

To access the data in the event handler, you must use event.data:

var myF = function(e){
    alert('a click ' + e.data.model + ' ' + e.data.year); 
    alert(this.id);
};

Moreover, the property which contains the id is called id, not ID. And you have the typo myCar2 = mycar instead of myCar2 = myCar.

Demo

answered Apr 24, 2014 at 18:23

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

Scorpion-Prince · Accepted Answer · 2014-04-24 18:51:06Z

0

You get undefined because the this variable is the jquery anchor object. What would work in your case is

var myF = function(car){
alert('a click ' + car.model + ' ' + car.year); 
};

var myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

var myCar2 = new Object();
myCar2.make = "VW";
myCar2.model = "golf";
myCar2.year = 2000;


$('.feature1').click(function() { return myF(myCar); });    
$('.feature2').click(function() { return myF(myCar2); });

This is not the optimal way to do it, but it will get it working.

http://jsfiddle.net/MWxG8/

edited Apr 24, 2014 at 18:51

answered Apr 24, 2014 at 18:14

Scorpion-Prince

3,6443 gold badges21 silver badges24 bronze badges

3 Comments

edrian Over a year ago

When you do this: myF(myCar) you are calling that function at that moment. That will not add the handler to the click function

Hello-World Over a year ago

this calls the function before the click

Rune FS Over a year ago

you'd need to return a function and not call the alert directly

Collectives™ on Stack Overflow

passing objects in jquery click event

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related