Forums

fooman

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)?

traq

You might find 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();
  }

fooman

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!

traq

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.

noahgelman

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.

fooman

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!

noahgelman

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

treehouse : what would you like to learn today?

Forums

[Solved] $(this) from within a seperately called function