Use jquery inside or outside of a document

Question

Below two scenarios give me the same behavior. But what is the difference technically? (I put the code below in the last section of the script tags in the body.)

$(document).ready(function() { $('.collapse').collapse({toggle: false}); $(document).on('click', '#expandAllLessons', function() { $('div.accordion-body').collapse('show'); }); $(document).on('click', '#collapseAllLessons', function() { $('div.accordion-body.collapse').collapse('hide'); }); }); 

or

 $(document).ready(function() { $('.collapse').collapse({toggle: false}); }); $(document).on('click', '#expandAllLessons', function() { $('div.accordion-body').collapse('show'); }); $(document).on('click', '#collapseAllLessons', function() { $('div.accordion-body.collapse').collapse('hide'); }); 

Thanks.

Answer 1

More or less, he does the same.

Using .on() with a child selector, you use event delegation to bind any future events to any elements that match that selector. document is the very top of the DOM tree (and is available when the script runs), so your event delegation works.

.ready() waits for the DOM to assemble, so you can more reliably directly bind events using methods such as .click() , .hover() , etc.

So your first example is just waiting for the DOM to build, and then delegating the event. The second example is just to delegate the event immediately after the script is executed.

From the jQuery documentation regarding .on ():

Direct and delegated events

Most browser events, or spread, from the deepest, innermost element (the purpose of the event) to the document in which they occur down to the body and element of the document. In Internet Explorer 8 and below, several events such as change and presentation are not originally a bubble, but jQuery fixes these to create bubbles and create consistent behavior between browsers.

If the selector is omitted or equal to zero, the event handler is called direct or direct. A handler is called every time an event occurs on selected elements, regardless of whether it happens directly on an element or bubbles from a streaming (internal) element.

When a selector is provided, the event handler is called delegated. The handler is not called when the event occurs directly on the associated element, but only for descendants (internal elements) that match the selector. jQuery bubbles an event from the target event to the element in which the handler is attached (that is, the outermost element) and fires the handler for any elements along this path corresponding to the selector.

Answer 2

Look at the comments first. After jQuery 1.7 on can delegate events:

"The .on () method attaches event handlers to the currently selected set of elements in the jQuery object. Starting with jQuery 1.7, the .on () method provides all the functionality needed to attach event handlers. To get help converting from old jQuery event methods see..bind () ,. delegate () and .live (). "

So, before jQuery 1.7, this is the correct answer:

At first it’s better, because the document event is ready when the HTML document is fully loaded in the DOM. And then you are sure that you have all the elements in place, and you can associate events with them.

But if you bind the event before loading the '#expandAllLessons' element in the DOM, then it simply won’t work, because the jQuery selector will not find any elements and will not bind this event anywhere.

After 1.7, both will work almost the same. In practice, since in the first case, when you fire an event before the document is ready, it will not be executed. In the second example, it will be executed because it was attached when the script was loaded.

Answer 3

Whenever you execute a function, whether it is $ (document) .ready (function () {}); or something else, all the contents inside this function can read only those things that are at its level or higher (if you do not use the return function).

The top paragraph means that all your code will not be executed until it is downloaded, but it also means that it is nested code. Nested code means that certain variables and functions will not be read from the outside. Example:

 function bob(){ function sandy(){ function joe(){ alert("I can access anything written by sandy, bob or ray!"); } } } function ray(){ alert("I can't see anything from anybody but bob!"); }