Question

I am trying to write a script for a dynamic drop down menu as a way to learn OOP javascript and jQuery. You can see the dummy site at http://www.industrialMerchants.com/industrialMerchants. The script can be found at http://www.industrialMerchants.com/industrialMerchants/javascript/horizontalDropMenu2.js

The script first defines a number of objects, after which I have a $(document).ready() with a closure designed to initiate the process of wrapping relevant jQuery objects and DOM elements into my object model.

The problem is, when I load the static html document serving as a dummy website, Firebug gives me the following error:

"TypeError: jqObject is undefined."

The error points to the fifth line of the following function.

function Menu(jqObject) {
    self = this;
    this.self = jqObject;
    this.submenus = (function(){
        jqObject.children().children("ul").each(function() { <<--- Error
            submenu = new Submenu($(this), self);
            submenus.push(submenu);
            return submenus;
        });
    }());
}

The lines that call the function are here:

$(document).ready(function(){ 
     menus = new Array();
     $("ul.horizontalDropMenu").each(function(){
         menu = new Menu($(this));
         menus.push(menu);
     });
 });

As you can see, the call to the Menu() object constructor includes as an argument a reference to a jQuery object, so that jqObject clearly IS defined. So what gives?

When I insert breakpoints into the code starting at the $(document).ready() declaration, the execution completely skips it altogether, and starts at the function declaration itself. It’s as if the browser is trying to execute the function declarations before any explicit call to them is made.

Answer 1

Setting a breakpoint and going up the call stack gives me this line (outside .ready – but that doesn’t matter):

Submenu.prototype = new Menu();

You’re creating a menu instance without a jQuery object but with undefined instead.