Question

当我在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的新手，这是正常的还是我做错了什么？为什么它表现得那样？这样做是一种好习惯吗？

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

Answer 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/

Answer 2

它基本上告诉您的浏览器在所有DOM节点准备就绪后运行脚本，即下载并呈现。

Answer 3

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

您可以在How does the location of a script tag in a page affect a JavaScript function that is defined in it?

了解更多相关信息

Answer 4

在

中包装文件中的内容

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

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

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

JavaScript无法处理外部文件

4 个答案: