Home › Forums › JavaScript › $(this) from within a seperately called function
- This topic is empty.
-
AuthorPosts
-
January 17, 2013 at 1:30 pm #42061
fooman
ParticipantWhen 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 #121286__
ParticipantYou 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 3:50 pm #121297__
ParticipantWell, 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 #121309noahgelman
ParticipantIt’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 18, 2013 at 4:22 am #121340noahgelman
ParticipantYeah, that can definitely happen. It happens to everyone. It’ll never stop happening. Don’t let these mistakes define you as a developer.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.