Hey dev peeps,

So, I'm writing two custom Lightning components:
1) A navigation menu that fire Application level events when nav items are clicked
2) A form component that listens for navigation events, and dynamically loads different form pages
 

({
    initialLoad : function(component, event) {
        console.log("Entering CustomerApplicationNavigationController.initialLoad");
        var initialDivId = "YourInfo",
            formName = "CreditApp_" + initialDivId;
        this.changeActiveNavItem(component, event, initialDivId);
        console.log(formName);
        console.log("Running CustomerApplicationNavigationHelper.fireNavEvent...");
        this.fireNavEvent(component, event, formName);
    },
    fireNavEvent : function(component, event, formCmpName) {
        console.log("Entering CustomerApplicationNavigationHelper.fireNavEvent...");
        console.log("formCmpName: " + formCmpName);
        //console.log($A);
        var navEvent = $A.get("e.c:CustomerApplicationNavEvent");
        console.log(navEvent);
        navEvent.setParams({"pageToLoad" : formCmpName});
        console.log("navEvent: " + navEvent);
        navEvent.fire();
        console.log("navEvent fired...");
    },
    registerClickHandlers : function(component, event) {
        var navItems = document.getElementById("navItems");
        for (var idxNavItem = 0; idxNavItem < navItems.children.length; idxNavItem++) {
            navItems.children[idxNavItem].addEventListener("click", function (clickEvent) {
                var formName = "CreditApp_" + clickEvent.target.id;
                //console.log(formName);
                console.log("Entering CustomerApplicationNavigationHelper.fireNavEvent...");
                console.log("formName: " + formName);
                //console.log($A);
                var navEvent = $A.get("e.c:CustomerApplicationNavEvent");
                console.log("navEvent: " + navEvent);
                navEvent.setParams({"pageToLoad" : formName});
                console.log("navEvent: " + navEvent);
                navEvent.fire();
                console.log("navEvent fired...");
            });
        }
    },
    changeActiveNavItem : function(component, event, navItemId) {
        console.log("Entering CustomerApplicationNavigationController.changeActiveNavItem");
        console.log(navItemId);
        var navItems = document.getElementById("navItems"),
            activeNavComponent = document.getElementById(navItemId);
        console.log(activeNavComponent);
        console.log(JSON.stringify(navItems.children));
        for (var idxNavItem = 0; idxNavItem < navItems.children.length; idxNavItem++) {
            navItems.children[idxNavItem].classList.add("inactive");
        }
        activeNavComponent.classList.add("active");
    }
})

After running the initial "fireNavEvent" on doInit of the nav component, var navEvent = $A.get("e.c:CustomerApplicationNavEvent"); works fine and loads an event into navEvent:

console.log("navEvent: " + navEvent);

returns:
navEvent: SecureAuraEvent: [object Object]{ key: {"namespace":"c"} }

However, when the "registerClickHandlers" version of this runs, I get this:

console.log("navEvent: " + navEvent);

returns:
navEvent: undefined

Is this a scoping problem?  I'm not including any libraries like jQuery that would mess with the "$" variable.  console.log($A) gives me the JavaScript API object in each context, just not returning an event with $A.get.  How can I even start to debug this?


Thanks,

Nathan