JavaScript 无法处理外部文件答案

【问题标题】：JavaScript not working on external fileJavaScript 无法处理外部文件
【发布时间】：2013-12-03 17:16:46
【问题描述】：

当我在我的 HTML 文档中使用此代码时，它正在工作：

$('a.tocenter[href*=#]').click( function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $('html,body').animate({ scrollTop: targetOffset - ( $(window).height() - $target.outerHeight(true) ) / 2 }, 1000);
    return false;}
    }
});

如果我尝试将此代码放在外部 JavaScript 文件中，然后将其链接到：

<script src="js/main.js"></script>

它不起作用，为了让它起作用，我不得不把它包裹起来：

$( window ).load(function() {
    ...
});

如果我这样做，它会起作用。

我是 JavaScript/jQuery 的新手，这是正常的还是我做错了什么？为什么会这样？这样做是个好习惯吗？

将它放在外部文件中的唯一目的是保持代码简洁易懂。

【问题讨论】：

我认为您应该尝试将脚本标签放在文档的</html> 标签之后。这样，您的脚本将在手边找到完整的文档。

标签： javascript jquery external-js

【解决方案1】：

您正在使用.click() 将事件处理程序附加到元素，因此此时它需要存在。

如果您检查page ready，则可以保证这一点：

$(function() {
    // your code
});

或window load:

$(window).load(function() {
    // your code
});

，或者如果您将脚本保留在页面中，则在其末尾：

    <script type="text/javascript">
        // your code
    </script>
</body>

另一种方法是使用delegation:

$(selector_for_element_that_will_surely_be_there).on(event, selector_for_element_receiving_the_event, function() {
    // your code
});

// ie:
$(document).on('click', 'a.tocenter[href*=#]', function() {
    // your code
});

看看吧：http://api.jquery.com/on/

【讨论】：

【解决方案2】：

它基本上告诉您的浏览器在所有 DOM 节点都准备好（即下载和渲染）之后运行脚本。

【讨论】：

【解决方案3】：

尝试将脚本标签添加到 html 页面的底部而不是页眉中。这样做是出于性能原因，这样您的页面会尽可能快地显示，然后会加载额外的 javascript 内容。

您可以通过以下方式了解更多信息：How does the location of a script tag in a page affect a JavaScript function that is defined in it?

【讨论】：

【解决方案4】：

将文件中的内容包装在

中

$(function(){
//js goes here
});

或将文件的引用放在页面底部

这允许在执行脚本之前加载 DOM。

【讨论】：