You have an event handler that adds a class to a DOM element, waits one second using
setTimeout(), and then removes that class:
The class gets added when you click, but it never gets removed. You have confirmed that the code inside setTimeout() is being called, but it doesn’t seem to do anything. You’ve used .removeClass() before, and that code looks correct. You are using $(this) the same way in both places, but it doesn’t seem to work inside the setTimeout() call.
Save this in a variable before calling setTimeout():
Even better, since you’re calling $() in both places, follow the advice in Recipe 5.3 and
copy$(this) to a variable instead of this:
What is $(this) anyway, and why doesn’t it always work? It’s easier to understand if you separate it into its two parts, $() and this.
In the code for a traditional on event attribute, this refers to the element receiving the event—but only in the attribute itself, not in a function called from the attribute:
As you can see from the third alert(), this is actually the window object inside the function. For historical reasons, window is the “default” meaning of this when a function is called directly (i.e., not called as a method of an object).
In a jQuery event handler, this is the DOM element handling the event, so $(this) is a jQuery wrapper for that DOM element. That’s why $(this).addClass() works as
expected in our “Problem” code.
But the code then calls setTimeout(), and setTimeout() works like a direct function call: this is the window object. So when the code calls $(this).removeClass(), it’s actually trying to remove the class from the window object!
Why does copying this or $(this) into a local variable fix this? (Pun intended.) Java- Script creates a closure for the parameters and local variables of a function.
Closures may seem mysterious at first, but they really boil down to three simple rules:
A function can read and write not only its own parameters and local variables but also those of any functions it’s nested in.
The previous rule always works, even if the outer function has already returned and the inner function is called later (e.g., an event handler or setTimeout() callback).
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.