jQuery(document).ready( ... basic understanding of

[fatkatie]

I always thought that the use of

jQuery(document).ready(f() ... 

simply insured that before f() was called, the
DOM was loaded and secured for use.

So what is happening here?  I'm misunderstanding something very basic.

function f() {
   return 'something';
}

jQuery(document).ready(function() {
   jQuery('#idb_submitstory_submit').on('click',function(){
      var val = f();
      // the value used here ... works fine
      

jQuery(document).ready(function() {
   jQuery('#idb_submitstory_submit').on('click',function(){
      var val = jQuery(document).ready(f());
      // use the value here ... fails

I do realize that the second wrap of ready is not necessary, since the click event

already has insured the environment.

Thank you.

Edited October 31, 2017 by fatkatie

[kicken]

What's wrong in the second version is that you're assigning val the return value of the .ready function, not the return value of the f() function. You're also passing the return value of f() into the .ready method, rather than the function itself which is also incorrect.

 

Overall though, the whole concept is just wrong. .ready() is only for ensuring the DOM is ready before to start interacting with it, and the way you use it is by passing it a function to execute when the dom is ready.

 

jQuery(document).ready(function(){
    //Do your code here
    //Do not use .ready again anywhere here.
});

Also, the preferred syntax for using ready is to simply pass a function to the jQuery constructor. Like this:

jQuery(function($){
    //Do your code here
});

It's shorter and ensures that $ is correctly mapped to jQuery.

[gizmola]

It's basically a bad assumption you made.

 

What jQuery.ready() returns is not the results of your function execution, but rather the jQuery object or a thenable, depending on the version of jQuery you are using.   If you look at this jsFiddle you can see that is the case: https://jsfiddle.net/9xr8qejo/8/

 

Another way to look at it is that jQuery.ready() is an event handler that is waiting for the event associated with DOM availability, so that you can run code that manipulates the DOM.  That's really its reason for being, and the way it should be used.  Read Kicken's response extra carefully until you fully get his points, and also follow his recommendations as best practices.