Q:

jQuery .on() and adding classes

Why wouldn't this work? I thought if I add a class name to the trigger, upon opening, and then if you click the trigger that now has this class name... we could close it.
// Menu trigger
$('.menu-trigger').on('click', function(e) {
    e.preventDefault();
    $('.menu-container').fadeIn('fast');
    $(this).addClass('open');
});
$('.menu-trigger.open').on('click', function(e) {
    e.preventDefault();
    $('.menu-container').fadeOut('fast');
    $(this).removeClass('open');
});

A:

Event Delegation :
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.
 $('parentselector').on('click','childselector',//callbackfunction() 

here, document is just act as a parent for menu class.. It is used to specify .menu-trigger and .menu-trigger.open are individual element inside the document and .on('click' is used for dynamically created element.   
$(document).on('click','.menu-trigger' function(e) {
    e.preventDefault();
    $('.menu-container').fadeIn('fast');
    $(this).addClass('open');
});
$(document).on('click','.menu-trigger.open' ,function(e) {
    e.preventDefault();
    $('.menu-container').fadeOut('fast');
    $(this).removeClass('open');
});

