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. Advertisements

  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. Advertisements

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. Mark
    Replies:
    3
    Views:
    660
    bruce barker
    Aug 26, 2004
  2. Replies:
    1
    Views:
    480
    Juan T. Llibre
    Jul 20, 2006
  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:
    748
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Oct 25, 2006
  4. Neroku
    Replies:
    12
    Views:
    775
    Oliver Wong
    Feb 12, 2007
  5. Michael Bell
    Replies:
    17
    Views:
    648
    Matthias Buelow
    Dec 6, 2007
  6. Christopher Brewster
    Replies:
    5
    Views:
    629
    John Machin
    Nov 14, 2008
  7. bluebaron
    Replies:
    3
    Views:
    962
    Jonathan N. Little
    Nov 4, 2009
  8. hans
    Replies:
    3
    Views:
    176
    George Mpouras
    Mar 2, 2011
Loading...