$(document).ready + jQuery + understand

Question

I am trying to understand $(document).ready with this, perhaps, silly JSFIDDLE example (this basically uses jQuery to draw 10 divs with a title Graph1...) There is numerous question on this already here and here. But what i want is to understand the flow/order of how this works, relative to the DOM..etc. Why I should use it and why I should not. I am trying to use this silly example to understand it better

Specifically, with the jsfiddle example, Why does it not work with noWrap - in <body> and $(document).ready(function(){ is commented out?

Note: Maybe this example is too silly or unclear to wha I want, but with your comments I will hopefully be able to clarify it and get a better understanding.

<!DOCTYPE html> <html> <head> <title>Access Links</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- <script src="../src/jquery-1.11.0.min.js"></script> <!-- works here with $(document).ready(function(){ commented out --> <!-- DOES NOT WORK here with $(document).ready(function(){ --> </head> <body> <!-- <script src="../src/jquery-1.11.0.min.js"></script> <!-- works here with $(document).ready(function(){ commented out --> <!-- DOES NOT WORK here with $(document).ready(function(){ --> <div class="container" id="graphs"> <!-- My divs will go here --> </div> <!-- <script src="../src/jquery-1.11.0.min.js"></script> <!-- works here with $(document).ready(function(){ commented out --> <!-- DOES NOT WORK here with $(document).ready(function(){ --> <script> //$(document).ready(function(){ //--------- START: Draw all your divs------------------------------------------> var numberOfDivs =10; for (var x = 1; x <= numberOfDivs; x += 1) { var $div = $('<div class="chart half"><h3 id="g' + x + '">Graph' + x + '</h3><svg id="chart' + x + '"></svg></div>'); $('#graphs').append($div); } //--------- END: Draw all your divs------------------------------------------> //} </script> <!-- <script src="../src/jquery-1.11.0.min.js"></script> <!-- DOES NOT work here with $(document).ready(function(){ commented out --> <!-- DOES NOT WORK here with $(document).ready(function(){ --> </body> </html>

Your code sample's comments make the comparisons of "working" from "not working" quite difficult to follow. I would fully expect the sample posted to work as designed without using $(document).ready() since the elements are referenced after they're created in the DOM. — David
– David, Commented Sep 24, 2014 at 23:48
@David tks,but Maybe you can answer the specific Q i asked re the js fiddle example as a starter — HattrickNZ
– HattrickNZ, Commented Sep 25, 2014 at 0:03
And what is your specific question? That's my point, what you're asking is unclear. When to use $(document).ready()? Well, you'd use it when you don't want your code to execute until the document's ready event, which is invoked when the DOM is complete. — David
– David, Commented Sep 25, 2014 at 0:05

yuanzm · Accepted Answer · 2014-09-24 23:54:39Z

If you want to understand the function $(document).ready,I recommended you read the source code of jQuery.Like this:

// HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) return jQuery( document ).ready( selector );

if the selector is a function in $(), the $(document).ready will work.BTW,I guess you want to know the execution time of this function,this function will work when the DOM tree is loaded complete.

Collectives™ on Stack Overflow

$(document).ready + jQuery + understand

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related