Grow your CSS skills. Land your dream job.

$(this) from within a seperately called function

  • # January 17, 2013 at 1:30 pm

    When using code such as:

    $(".save").click(function(){
    $(this).remove();
    });

    $(this) refers to the $(“.save”) element. So it’s removed or whatever you do with it.

    Now what does $(this) refer to when you call a function from within the click?

    $(".save").click(function(){
    removeBtn():
    });

    function removeBtn(){
    $(this).remove();
    }

    $(this) no longer refers to the $(“.save”) element. What exactly does it belong to now?
    What if you had a few buttons that you wanted to have use this removeBtn() function and had to use $(this)?

    __
    # January 17, 2013 at 2:04 pm

    You might find [this](http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) interesting.

    IIUC, `this` inside `removeBtn` would be “undefined” (or, in most browsers, would fall back to `[object Window]`).

    To make your example work:

    $(“.save”).click( function(){
    removeBtn( this );
    });

    function removeBtn( context ){
    $(context).remove();
    }

    # January 17, 2013 at 2:47 pm

    Yes I’ve found that it’s “undefined” in Firebug, which led to this little thread haha. I was just curious as to “why” it’s undefined and doesn’t bubble up to the object that called the function. Maybe just wishful thinking ;)

    Before I read this, I changed my function to do exactly what you’ve stated. So.. good call!

    I will definitely give that link a read. Thanks for your help!

    __
    # January 17, 2013 at 3:50 pm

    Well, functions in javascript *are* objects, so `this` “bubbles (that’s not really the right term) up” to the context the function has inherited from its parent – and, since you’ve declared your function globally, the “parent” is the `Window` object.

    …and, no problem, glad you got it figured.

    # January 17, 2013 at 8:55 pm

    It’s a matter of scope. When you run a function, it can only use the data it’s given. If inside “Function A” you want to call “Function B”, then “Function B” doesn’t automatically get to use all the data (variables, functions, arrays, etc.) that exist in “Function A” unless you specially pass “Function B” the data.

    This is a must in order to prevent conflictions. What if “Function A” and “Function B” use a variable with the same name? Then simply calling “Function B” would screw “Function A” up.

    In your case, you are handing the **specific element data** that “this” refers to to the removeBtn function. So now removeBtn knows what your talking about.

    If that makes any sense.

    # January 17, 2013 at 11:58 pm

    Scope of variables is something I’m always keeping in mind, or else I’d go nuts haha.
    But the $(this) object sometimes escapes me when calling multiple functions from functions. It doesn’t seem to behave the same as having an “undeclared” or “undefined” variable… as often $(this) does end up being an object or something in the hierarchy of the program.

    Light has been shed. And I am now a better person than I was this morning ;)
    Thanks again peeps!

    # January 18, 2013 at 4:22 am

    Yeah, that can definitely happen. It happens to everyone. It’ll never stop happening. Don’t let these mistakes define you as a developer.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".