How can 'this' be two different things

[trib]

Can anyone help with this problem?

I have a class that adds an event handler on a DOM object, and that
event handler calls a method of the class. I'd like the handler
function to run in the scope of the same object instance that assigned
the handler to the DOM element (since there may be more than one
instance on the page). But I also still need to be able to access a
reference to the object on which the event occured. I know how to do
either one of these, but not both!

The practical application of this is a dynamic table widget that
combines an HTML table with a form, allowing the user to add new rows
to the table. Each row also gets a delete button appended and that's
what I'm assigning the click event to. When the button is clicked the
JS should delete the relevant row from the table and remove some data
from an array.

This is what I've got (using Jquery):

$("#"+this.tblid+"
img.deletebtn").click(this.deleteHandler.bind(this));

vs:

$("#"+this.tblid+" img.deletebtn").click(this.deleteHandler);

The former makes 'this' a reference to the instance, while the latter
makes it a reference to the image being clicked. I think. Anyhow, I
need references to both. Am I approaching this the wrong way or is
there a solution?

Cheers,

Andrew

 

[RobG]

Can anyone help with this problem?

I have a class that adds an event handler on a DOM object, and that
event handler calls a method of the class.
[...]
This is what I've got (using Jquery):

$("#"+this.tblid+"
img.deletebtn").click(this.deleteHandler.bind(this));

vs:

$("#"+this.tblid+" img.deletebtn").click(this.deleteHandler);

The former makes 'this' a reference to the instance, while the latter
makes it a reference to the image being clicked. I think. Anyhow, I
need references to both. Am I approaching this the wrong way or is
there a solution?

You want references from your handler to both the DOM object and the
"class". The this keyword can only reference one thing, you can set
it to whatever you like in the function call using call or apply, or
just let it set itself based on how you make the call.

Make up your mind what you what the this keyword to reference and do
that consistently. Then use a closure for the other reference.

You should be able to find general ways to do that in the archives, or
if you want to know how to do it using jQuery, use a jQuery group:

<URL: http://groups.google.com/group/jquery-en >