javascript - 除非在页脚，否则 jQuery 不起作用

Question

我的 jQuery 确实无法工作，除非它位于我网站 HTML 的页脚中。为什么是这样？我以前从未遇到过这个问题，所以我不确定是什么原因造成的。 我的 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');
});

谢谢

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');
    });
});

你必须用

包装你的代码

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

确保在访问 DOM 之前已加载它。