Jquery – storing jquery selectors in an object

jqueryjsonobject

The following does not seem to work –

IT.TopSlide = {

 selectors : {
  div : $('#top-slide'),
  signup : $('#top-slide #signup'),
  login : $('#top-slide #login'),
  signup_trigger : $('#header .top-slide-triggers a.signup-trigger'),
  login_trigger : $('#header .top-slide-triggers a.login-trigger'),
  close : $('a.close')
 },

 init : function (){

  var selectors = IT.TopSlide.selectors;
  selectors.div.hide();
  selectors.login.hide();

 }

};

$(document).ready(function () {
   IT.TopSlide.init();
});

selectors.div returns an empty array. Bare in mind that for each namespace I want to have the first item as a selectors storer that I can access with IT.TopSlide.selectors from any other object. From within the namespace I would like to define it as a var – var selectors = IT.TopSlide.selectors; so I can access the cached selectors.

Best Solution

you want to be sure to put this in a function that runs once the DOM is ready

$(document).ready(function(){
    IT.TopSlide = {

    selectors : {
        div : $('#top-slide'),
        signup : $('#top-slide #signup'),
        login : $('#top-slide #login'),
        signup_trigger : $('#header .top-slide-triggers a.signup-trigger'),
        login_trigger : $('#header .top-slide-triggers a.login-trigger'),
        close : $('a.close')
     },

     init : function (){

     var selectors = IT.TopSlide.selectors;
     selectors.div.hide();
     selectors.login.hide();

       }

    };


    IT.TopSlide.init();

});

otherwise it tries to add the objects before they are created.

Related Question