How can 'this' be two different things

Discussion in 'Javascript' started by trib, May 16, 2008.

  1. trib

    trib Guest

    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
     
    trib, May 16, 2008
    #1
    1. Advertising

  2. trib

    RobG Guest

    On May 17, 7:10 am, trib <> wrote:
    > 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 >


    --
    Rob
     
    RobG, May 19, 2008
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. J. Campbell
    Replies:
    1
    Views:
    543
    Victor Bazarov
    Nov 26, 2003
  2. M. Clift

    Making different things equal

    M. Clift, Aug 22, 2004, in forum: Python
    Replies:
    4
    Views:
    286
    M. Clift
    Aug 23, 2004
  3. =?Utf-8?B?V2lsbGlhbSBTdWxsaXZhbg==?=

    vs2005 publish website doing bad things, bad things

    =?Utf-8?B?V2lsbGlhbSBTdWxsaXZhbg==?=, Oct 25, 2006, in forum: ASP .Net
    Replies:
    1
    Views:
    626
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Oct 25, 2006
  4. Michael Bell
    Replies:
    17
    Views:
    563
    Matthias Buelow
    Dec 6, 2007
  5. hans
    Replies:
    3
    Views:
    127
    George Mpouras
    Mar 2, 2011
Loading...

Share This Page