将Javascript代码从html移至外部js文件后，为什么为什么不起作用？

Question

I have this Javascript code that was working perfectly fine in my HTML. When I moved it to my main.js it suddenly stopped working.

Disclaimer: I am very new to jQuery and Javascript, so sorry if it is really obvious.

var infoVisible = false,
buyVisible = false;

function closeAllProductInfo() {
    $('#info').css({visibility: 'hidden'});
    $('#buy').css({visibility: 'hidden'});
    $('#options.info a').removeClass('active');
    $('#options.buy a').removeClass('active');
    infoVisible = false;
    buyVisible = false;
    imagesVisible = false;
}

function openProductInfo() {
    closeAllProductInfo();
    $('#info').css({visibility: 'visible', opacity: 0});
    $('#info').animate({opacity: 1}, 250);
    $('#options.info a').addClass('active');
    infoVisible = true;
}

function openProductBuy() {
    closeAllProductInfo();
    $('#buy').css({visibility: 'visible', opacity: 0});
    $('#buy').animate({opacity: 1}, 250);
    $('#options.buy a').addClass('active');
    buyVisible = true;
}

$('.info').click(function() {
    if (infoVisible) { 
        $('#info').animate({opacity: 0}, 250, function() {  
            closeAllProductInfo(); 
        }); 
    } else { 
        openProductInfo(); 
    }

    return false;
});

$('.buy').click(function() {
    if (!$(this).hasClass('in-active')) {
        if (buyVisible) { 
            $('#buy').animate({opacity: 0}, 250, function() { 
                closeAllProductInfo(); 
            }); 
        } 
        else { 
            openProductBuy(); 
        }
    }

    return false;
});

$('#info').click(function() {
    if (infoVisible) { 
        $('#info').animate({opacity:0}, 250, function() { 
            closeAllProductInfo(); 
        }); 
    }
});

$('#buy').click(function() {
    if (!$(this).hasClass('in-active')) {
        if (buyVisible) { 
            $('#buy').animate({opacity:0}, 250, function() { 
                closeAllProductInfo(); 
            }); 
        }
    }
});

Answer 1

Probably because it used to execute after the document was loaded but now it executes when the script is loaded. Do you load main.js at the end of your HTML file or the start? Use this to get it to execute after the document is ready:

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});

Answer 2

Try to wrap all your code in :

$(document).ready(function(){
   // Your code in here.
});