Question

I am trying to define all my main variables within an object called globals. The problem is that when it comes to using a previous element such as membersTab to grab faces I get the error:

Uncaught TypeError: Cannot read property ‘membersTab’ of undefined.

What am I doing wrong?

 var globals = {
  siteWrap      : $('#siteWrap'),
  content       : $('#content'),
  membersTab    : $('#membersTab'),
  faces     : globals.membersTab.find('.member'),
  members       : {},
  mID       : globals.siteWrap.attr('mID'),
  uID       : globals.siteWrap.attr('uID'),
  mTag      : globals.siteWrap.attr('mTag'),
  uFirst        : globals.siteWrap.attr('fn'),
  uLast     : globals.siteWrap.attr('ln'),
  host      : globals.siteWrap.attr('host'),
  dialogueBox   : $('#dialogueBox'),
  screen        : $('#screen').click(function(){ closeDialogue(true); })
  }

Answer 1

If your definition of globals is not inside $(document).ready(), it is possible that the page is not yet loaded, hence $('#membersTab') returns an empty collection.

Moreover when you declare faces, the object globals is not yet created.

The simplest way is probably something like

globals = {};
globals.membersTab = $('#membersTab');
globals.faces = globals.membersTab.find('.member');
...