All geek questions in one place

JQuery document.ready

I am a bit confused with document.ready in jQuery.

When do you define javascript functions inside $ (document) .ready (), and when not?

Is it enough to just put the javascript code inside $ (document) .ready ()?

What happens when you do not?

For example, I use regular jQuery selectors that do something when you click on things. If you do not wrap them with a document. Already what harm?

Could this cause problems if someone clicks on an element a second before the page loads? Or can it cause other problems?

+6
source share
5 answers

The document.ready handler starts when the DOM is loaded by the browser and ready to go.

Whether to use it or not depends on where you place your own scripts. If you put them at the end of the document, before the closing </body> you do not need to use document.ready , because by the time your script executes the DOM, it will already be loaded and you can manipulate it.

If, on the other hand, you put your script in the <head> section of the document, you should use document.ready to make sure the DOM is fully loaded before trying to modify it or attach event handlers to various elements. If you do not, and you try to attach, for example, a .click event .click to a button, this event will never be triggered, because at the moment your script is running, the jQuery selector that you used to search for the button did not return any elements, and you did not successfully attach the handler.

+5
source

When do you define javascript functions inside $ (document) .ready (), and when not?

If functions should be available around the world (which may indicate a poor design for your application), you must define them outside the ready handler.

Is it enough to just put the javascript code inside $ (document) .ready ()?

See above.

What happens when you do not?

Depends on what your JavaScript code does and where it is located. In the worst case, you will get runtime errors because you are trying to access the DOM elements before they exist. This will happen if your code is in head , and you not only define functions, but also try to access DOM elements.

For example, I use regular jQuery selectors that do something when you click on things. If you do not wrap them with a document. Already what harm?

There is no “harm” per se. It just does not work if the script is in head because the DOM elements do not exist yet. This means that jQuery cannot find and bind a handler to them.
But if you place the script immediately before the closing body tag, then the DOM elements will exist.

To be safe, whenever you want to access DOM elements, put these calls in the ready event handler or in functions that are called only after loading the DOM.

As a jQuery tutorial (you should read it) it already says:

As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events, etc., as soon as the DOM is ready.

To do this, we register the finished event for the document.

 $(document).ready(function() { // do stuff when DOM is ready });

To give a more complete example:

 <html> <head> <!-- Assuming jQuery is loaded --> <script> function foo() { // OK - because it is inside a function which is called // at some time after the DOM was loaded alert($('#answer').html()); } $(function() { // OK - because this is executed once the DOM is loaded $('button').click(foo); }); // OK - no DOM access/manipulation alert('Just a random alert ' + Math.random()); // NOT OK - the element with ID `foo` does not exist yet $('#answer').html('42'); </script> </head> <body> <div id="question">The answer to life, the universe and everything</div> <div id="answer"></div> <button>Show the answer</button> <script> // OK - the element with ID `foo` does exist $('#answer').html('42'); </script> </body> </html>
+6
source

You put the code inside $(document).ready when you need this code to wait for the DOM to load before it executes. If the code does not require the DOM to be loaded first in order to exist, you can put it outside of $ (document) .ready.

By the way, $(function() { }) is short for $ (document).ready();

 $(function() { //stuff here will wait for the DOM to load $('#something').text('foo'); //should be okay }); //stuff here will execute immediately. /* this will likely break */ $('#something').text('weee!');
+4
source

If you have your scripts at the end of the document, you do not need document.ready.

For example: there is a button and on click, you need to show a warning. You can bind the click event to a button in a document.ready document. You can write your jquery script at the end of the document or as soon as the element is loaded into the markup.

Writing everything to the document.ready event will make your page blank.

+1
source

There is no harm in not adding event handlers to ready () if you call your js functions in the href attribute. If you add them to jQuery, you must make sure that the objects to which these handlers belong are loaded, and this code should appear after the document is considered ready (). This does not mean that they should be in the ready () call, however you can call them in functions that are called inside ready () themselves.

0
source

Source: https://habr.com/ru/post/910455/

More articles:


All Articles