jQuery unable to find element unless inside doc ready

Question

I started with this simple code with the aim of calculating the selector once.

(function($) {

    var $mydiv = $('.mydiv');
    var myFunc = function(){
         $mydiv.css('background', 'red');
    }

    $(document).ready(function(){
        myFunc();
    });

    $(document).resize(function(){
        myFunc();
    });

})(jQuery);

But I'm only able to get it to work by moving the selector inside of the doc ready but I dont understand why I need to do this.

(function($) {

    var $mydiv;
    var myFunc = function(){
         if(!$mydiv){
             $mydiv = $('.mydiv');
         }
         $mydiv.css('background', 'red');
    }

    $(document).ready(function(){
        myFunc();
    });

    $(document).resize(function(){
        myFunc();
    });

})(jQuery);

it is Because html does not get rendered before dom ready. and js code will not work until DOM is loaded. see this http://learn.jquery.com/using-jquery-core/document-ready/ — Milind Anantwar, Mar 24 '14 at 08:00
your '.myDiv' might not be created at time of script exectuion — halkujabra, Mar 24 '14 at 08:00

score 2 · Accepted Answer · answered Mar 24 '14 at 08:00

why document ready is necessary?

because Html takes time to render while javascript start executing as it load, so document ready make sure html is completely loaded before you start accessing it via jQuery or javascript.

otherwise $('.elementClass') will return null as DOM is not loaded so all your Script will go unexpected.

As stated here:

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

score 1 · Answer 2 · answered Mar 24 '14 at 08:01

1

My guess is that .mydiv does not exist in the body when the script is being run.

Your script tag in the HTML could be above the elements with the mydiv class.

Try moving your script tag to the bottom of the body.

answered Mar 24 '14 at 08:01

logikal

1,087
12
24

jQuery unable to find element unless inside doc ready

2 Answers2