为什么将 Javascript 代码从 html 移动到外部 js 文件后无法工作？答案

【问题标题】：Why won't Javascript code work after moving it from html to an external js file?为什么将 Javascript 代码从 html 移动到外部 js 文件后无法工作？
【发布时间】：2015-01-18 02:54:14
【问题描述】：

我的 Javascript 代码在我的 HTML 中运行良好。当我将它移到我的 main.js 时，它突然停止工作。

免责声明：我对 jQuery 和 Javascript 非常陌生，如果真的很明显，请见谅。

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

【问题讨论】：

集成这个文件和jquery的html代码是什么？
即使与您的实际代码没有任何关系，也请正确格式化。很难阅读。同时向我们展示您是如何包含该文件的。
它是如何停止工作的？你是如何在 html 中包含你的代码的？
对不起，伙计们，因为我在 html 文件的顶部包含了 main.js，所以才发现它。将它移到底部并且它可以工作。
@novicePrgrmr：很好。如果 DOM 元素尚不存在，您将无法访问它们。

标签： javascript html inline-code

【解决方案1】：

可能是因为它曾经在加载文档后执行，但现在它在加载脚本时执行。您是在 HTML 文件的末尾还是开头加载 main.js？在文档准备好后使用它来执行它：

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

【讨论】：

就是这样。谢谢！
没问题，把它标记为答案，以帮助下一个有同样问题的人。

【解决方案2】：

尝试将所有代码包装在：

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

【讨论】：