JavaScript无法处理外部文件

当我在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文件中，然后将其链接到：

它不起作用，让它工作我必须把它包装进去：

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

如果我这样做有效。

我是JavaScript / jQuery的新手，这是正常的还是我做错了什么？ 为什么它表现得那样？ 这样做是一种好习惯吗？

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

Answer 1

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

如果您检查page ready这可以保证：

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

或window load ：

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

，或者如果您将脚本保留在页面的最后：

另一种方法是使用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内容。

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

Answer 4

将文件内容包装在文件中

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

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

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