Jump to content
Sign in to follow this  
fatkatie

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

Recommended Posts

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 by fatkatie

Share this post


Link to post
Share on other sites

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.
  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.