jQuery doesn't work unless in footer

Question

My jQuery literally will not work unless it's in the footer of my website's HTML. Why is this? I've never had this issue before, so I'm not sure what's causing it. My jQuery:

$('#trigger').click(function(e){
  var that = $(this);
  var wrap = that.parents('.wrap');
  that.toggleClass('open');
  $('.menu .sub-menu').removeClass('open');
  $('.menu').toggleClass('open');
  $(document.documentElement).toggleClass('menu-open');

   //console.log('clicked!');
  e.preventDefault();
});
var sub_parent = $(".sub-parent > a");
var sub_menu = $('.sub-menu');
sub_parent.click(function(){
  var that = $(this); //cache when you can
  var parent_menu = that.parents('.menu');
  var menu_index = parent_menu.index();
  var current_item = that.next('.sub-menu');
  //console.log(parent_menu);
  parent_menu.addClass('sub-level1-open');
  current_item.addClass('open');
});

var sub_back = $('.sub-menu--back');
sub_back.click(function(){
  var that = $(this);
  var menuIndex = that.parent().index();
  var currentItem = that.parent('.sub-menu');
  var parent_menu = that.parents('.menu');
  currentItem.removeClass('open');
  parent_menu.removeClass('sub-level1-open');
});

Thanks

Answer 1

$(document).ready(function(){
    $('#trigger').click(function(e){
        var that = $(this);
        var wrap = that.parents('.wrap');
        that.toggleClass('open');
        $('.menu .sub-menu').removeClass('open');
        $('.menu').toggleClass('open');
        $(document.documentElement).toggleClass('menu-open');

        //console.log('clicked!');
        e.preventDefault();
    });

    var sub_parent = $(".sub-parent > a");
    var sub_menu = $('.sub-menu');
    sub_parent.click(function(){
        var that = $(this); //cache when you can
        var parent_menu = that.parents('.menu');
        var menu_index = parent_menu.index();
        var current_item = that.next('.sub-menu');
        //console.log(parent_menu);
        parent_menu.addClass('sub-level1-open');
        current_item.addClass('open');
    });

    var sub_back = $('.sub-menu--back');
    sub_back.click(function(){
        var that = $(this);
        var menuIndex = that.parent().index();
        var currentItem = that.parent('.sub-menu');
        var parent_menu = that.parents('.menu');
        currentItem.removeClass('open');
        parent_menu.removeClass('sub-level1-open');
    });
});

You have to wrap you code with

    $(document).ready(function(){ 
        // Your Code
    }); 

to make sure that the DOM is loaded before you access it.