JavaScript无法处理外部文件

JavaScript not working on external file

本文关键字：外部 文件 处理 JavaScript      更新时间：2024-02-08

当我在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的新手，这是正常的还是我做错了什么？为什么它会这样？这样做是个好做法吗？

将它放在外部文件中的唯一目的是保持代码的干净和可理解性。

您使用.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/

它基本上告诉浏览器在所有DOM节点就绪后运行脚本，即下载并渲染。

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

您可以在以下位置了解更多信息：页面中脚本标记的位置如何影响其中定义的JavaScript函数？

在中包装文件中的内容

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

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

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

相关文章：