A chain of jQuery methods is failing some where along the way. The HTML code is as follows:
Break up the chain into individual statements, and store each jQuery object in a variable:
Now you have several debugging options. One is to use the Step Over command in the debugger to single step over each statement and observe your variables and the state of the page after each step.
In this code, you’d want to check $foo and $bar after their values are assigned. What is the value of the .length property of each? That tells you how many DOM elements were selected. Does each object contain the DOM elements you expect? Check the ,, , etc., properties to see the DOM elements.
Assuming that $foo contains the correct DOM elements, what happens after the.css() method is called? With Firebug’s CSS Inspector, you’ll find that the CSS font-size property is unchanged after the method call. Wait a minute! It’s font-size,not font size? There’s the problem. Checking the docs, you find that the correct way to write this is either of these:
Now we can incorporate these two fixes back in the original chain:
These console. log() calls will reveal that $bar does n’t have any elements selected, although we’ve fallen into a trap on the call that attempts to log the font size: we mis spelled font Size in the console.log() call as well!
This is where combining multiple debugging techniques helps: log those variables, use Firebug’s inspectors, read and reread your source code, and have someone else look at the problem too.
jQuery’s chaining helps make it easy to write concise code, but it can get in the way when debugging, because it is hard to step through the individual steps of the chain and see their results. Breaking up the chain into individual statements, even on a temporary basis while debugging, makes this task easier.
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.