[giggly kisses]

Not sure if I should post this in the JQuery subforum or here. Sorry if this is the wrong subforum.

My problem is I'm trying to get a property (rather, a few properties) of an object literal inside a JQuery .on() handler call. If I use this.propertyname inside the handler call I (obviously) don't get a property from the object literal, but instead get the element selected by jQuery. That's the best I can put it, I'm really having a hard time bring this problem to words. Below is my code and hopefully this will help explain my problem better than I can.

Here is the 'constructor' function for my WidgetAction object:

/*
* WidgetAction constructor
*/
var WidgetAction = function(element, bind, action1, action2) {
	if(typeof element == "string" && typeof action1 == "function") {
		this.element = element;
		this.bind = bind;
		this.toggleState = false;
		
		if(typeof action2 == "function") {
			this.action2 = action2;
		}
		else {
			this.action2 = false;
		}
		
		this.bindAction();
	}
	else {
		throw "Can't create WidgetAction object.";
	}
};

Here is the prototype for the WidgetAction object (I'm only going to post the relevant code, since there is quite a bit that isn't relevant. If you need the rest please let me know and I'll post it):

/*
* WidgetAction properties
*/
WidgetAction.prototype = {
    bindAction:			function() {
		
		$(this.element).on(this.bind, function() {
			if(this.toggleState) {
				this.action1();
				this.toggleState = false;
			}
			else {
				this.action2();
				this.toggleState = true;
			}
		});
	}
}

This function is used inside of the NavWidget object to bind an action with the widgets hashmap of actions:

NavWidget.prototype = {
addAction:			function(selector, bind, action, action2) {
		if(typeof selector == 'string' && typeof bind == 'string' && typeof action == 'function') {
			var element = $(selector);
			if(element.length === 0) {
				return false;
			}
			else {
				this.actions[selector] = new WidgetAction(selector, bind, action, action2);
			}
		}
	}
}

And lastly, here is my test instance to bind two toggle actions with the login widget:

WIDGETS.add('#login', SideEnum.RIGHT, false);
	
	WIDGETS.getWidget('#login', SideEnum.RIGHT).addAction('#login', 'click', function(event) {
		alert('action1');
		console.log(WIDGETS.getWidget('#login', SideEnum.RIGHT));
		return false;
	}, function(event) {
		alert('action2');
		console.log(WIDGETS.getWidget('#login', SideEnum.RIGHT));
		return false;
	});

So what I need to know is how I can get an object property from within JQuery without using 'this', since it gives me the DOM element selected by JQuery instead of the object.

[giggly kisses]

Hey guys, just wanted to let future Googlers and users know the solution that I found. Turns out the JQuery .on() function allows for a 3rd parameter that passes an object literal into the function. So my bindAction function ended up looking like this:

bindActions:			function() {
		$(this.element).on(this.bind, {action1: this.action1, action2: this.action2, toggle: this.toggleState}, function(event) {
			if(typeof event.data.action2 == "function") {
				if(!event.data.toggle) {
					event.data.action1();
					event.data.toggle = true;
				}
				else if(event.data.toggle) {
					event.data.action2();
					event.data.toggle = false;
				}
			}
			else {
				event.data.action1();
			}
			
			event.preventDefault();
		});
	}