Question

I am relatively new to javascript so please be patient if what i am asking is completely stupid!

I am trying to make a simple module. Inside the module i want to have a config object that holds settings for the module. I am also using jquery. The jquery selectors work only when in a function directly in the main object/module.

I understand that javascript has functional scope so I am suprised that I cannot use the jquery selectors anywhere inside the module.

EDIT:
I want to be able to directly set all of my configs inside the configs object using jquery selectors. This way i keep all the messy stuff inside one place and can then access configs.whatever throughout the rest of the module. At the moment jquery selectors do not work inside the configs module.

    var OB = function() {

    var configs = {
        'mode'    : 'test',
        'numOfSelects' : $('.mySelect').find('select').length,  // This doesnt work
    }

    var getMode = function() {
        return configs.mode;
    }

    function init() { 
        alert(configs.numOfSelects);  // This alerts 0 until the following line
        alert($('.mySelect').find('select').length);  // This correctly alerts 2
    };

    var handlers = {
        successHandler : function() {
            alert("Success");
        },
        errorHandler : function() {
            alert("error");
        }
    }

    return {
        init    : init,
        getMode : getMode
    }

}( );

$(document).ready(function(){
    OB.init();
});

Answer 1

It isn’t that jQuery isn’t in scope — that’s that the code isn’t executing when you think it is. The variable config is defined when that anonymous function (var OB = function() {}()) is executed. The DOM isn’t ready yet, so that DOM traversal doesn’t find anything. When you do the DOM traversal in init(), that isn’t executed until it’s explicitly called inside the $(document).ready() handler, at which point that DOM is set up. That’s the difference you’re seeing.