Custom Navigation Event Not Working For A Button Class

Question

I'm trying to make a level select screen, and instead of copy and pasting a bunch of level select buttons onto my level select screen, I wanted to try to create and position the buttons using code for a little more flexibility in the future. I've run into a few problems while doing this...the main problem being that my custom navigation events, for whatever reason, fail to bubble up to my main document class from my button class.

I've used over 20 navigation events in my project, so I'm pretty certain the problem is not my method of doing navigation events as a whole, but the problem is specific to using a button class. Or something else I'm missing. Anyhow, I'll post the code below. I performed a few traces to try and figure out what was going on. My custom navigation events class is creating the proper event, then my button class is dispatching the event, but the the code that listens for this event in my document class never runs. So I'm assuming there's some kind of problem in bubbling the navigation event up to the top. That's my best guess, could be something completely different. If you guys also have different suggestions about how to make my level select screen work better by completely restructuring what I've done, that's fine too...but this has been somewhat of a mystery and I was hoping to get it working this way. Thanks a bunch, here's the relevant code!

---NOTE: If this helps, the hierarchy is DocumentClass --> TitleScreen --> LevelSelectScreen --> LevelSelectButtons

LevelSelectScreen class

public class LevelSelectScreen extends MovieClip {

    public var levelSelectButtons:LevelSelectButtons;

    public function LevelSelectScreen() {

            for (var i:int = 1; i<=2; i++) 
            {
                levelSelectButtons = new LevelSelectButtons(i);
                addChild(levelSelectButtons);
            }
    }

}

LevelSelectButtons Class

public class LevelSelectButtons extends SimpleButton {

    public var levelNumber:int;
    public var levelSelectScreen:LevelSelectScreen;

    public function LevelSelectButtons(i) {

        x = 200;
        y = 100 + 50*i;
        addEventListener(MouseEvent.CLICK,LevelSelectClicked,false,0,true)
        levelNumber = i;
    }

    public function LevelSelectClicked(mouseEvent:MouseEvent):void
    {
        if (levelNumber == 1)
        {
            dispatchEvent( new NavigationEvent( NavigationEvent.START ) );
        }
        if (levelNumber == 2)
        {
            dispatchEvent( new NavigationEvent( NavigationEvent.STAGE2 ) );                        }

        }
    }
}

NavigationEvent class

package  
{
    import flash.events.Event;
    public class NavigationEvent extends Event 
    {
        public static const START:String = "start";
        public static const LEVELSELECTSCREEN:String = "levelselectscreen";
        public static const STAGE2:String = "stage2";

        public function NavigationEvent( type:String, bubbles:Boolean = false, cancelable:Boolean = false ) 
        { 
            super( type, bubbles, cancelable );         
            trace(type);
        } 

        public override function clone():Event 
        { 
            return new NavigationEvent( type, bubbles, cancelable );
        }

        public override function toString():String 
        { 
            return formatToString( "NavigationEvent", "type", "bubbles", "cancelable", "eventPhase" ); 
        }
    }
}

Answer 1

If you want the events to bubble up you need to set the bubbles property to true.

dispatchEvent( new NavigationEvent(NavigationEvent.START, true) );