ansaurus

Question

Answer 1

+1 A:

Because when you define $header : $('#header') that element is not available? and when you call lib.page.init it is? I am not sure when you call lib.page.init, but I bet it's in $(document).ready() right? And you define the object literal before the dom is ready.

Ok, your div#header is not available by the time you want to assign it to $header, you have two options and I will show you the best option first. It's what I meant with 'put all scripts at the bottom'!

<head>
    <!-- dont put scripts here if you can avoid it, it's bad! -->
</head>
<body>

    <div id="wrapper">
        <div id="header">
            <em>Example!</em>
        </div>  
    </div>      


    <!-- keep scripts at the end of the page just before the </body> tag -->
    <script type="text/javascript">

            var lib = {
                page : {
                    // div#header is available
                    $header  : $("#header"),
                    init: function() {
                        lib.page.$header().css("background","red");
                    }

                }
            }
            // you don't need onDomReady anymore.
            lib.page.init();

    </script>

</body>

Another option if you want to keep scripts in the header, is to assign $header in your onDomReady call.

<script>
    // create lib etc here

    $(function(){ // this is an onDomReady call in jQuery
        lib.page.$header = $('#header');
        lib.page.init();
    });
</script>

BGerrissen 2010-09-02 20:23:01

How can I define the object literal after the dom is ready?

Meander365 2010-09-02 21:09:44

When I console.log(lib.page.$header) in firefox I get a jQuery object returned and the selector is #header.Any ideas?

Meander365 2010-09-02 21:23:00

The presence of the jQuery object is no guarantee it's populated with DOM elements. You need to check the length on that. Also, moving all your javascript to the end of the document before the </body> tag fixes these kind of problems entirely.

BGerrissen 2010-09-02 22:13:56

I've updated the code with a better example - any ideas?

Meander365 2010-09-04 23:47:37

updated my awnser

BGerrissen 2010-09-05 09:02:16

Answer 2

A:

"This happens because the variables are instantiated at the time the script is interpreted. So at the time of the parser gets to the script the $("#header") isn't in the DOM yet."

Meander365 2010-09-07 00:20:47

ansaurus

tags:

views:

answers:

Javascript Object Literals and jQuery

related questions