JavaScript 无法处理外部文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20357551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript not working on external file
提问by pwnHyman
When I use this code inside my HTML document it's working:
当我在我的 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;}
}
});
If I try to put this code inside an external JavaScript file and then link it with:
如果我尝试将此代码放在外部 JavaScript 文件中，然后将其链接到：
<script src="js/main.js"></script>
It's not working, to let it work I had to wrap it inside:
它不起作用，为了让它起作用，我不得不将它包裹在里面：
$( window ).load(function() {
...
});
If I do this it works.
如果我这样做，它会起作用。
I'm a total newbie in JavaScript/jQuery, is this normal or am I doing something wrong? Why is it behaving like that? Is it a good practice to do that?
我是 JavaScript/jQuery 的新手，这是正常的还是我做错了什么？为什么会这样？这样做是一个好习惯吗？
The only purpose of having it in an external file is for keeping the code clean and understandable.
将它放在外部文件中的唯一目的是保持代码干净和易于理解。
回答by melancia
You're attaching an event handler to an element using .click(), so it needs to be there at this point.
您正在使用 将事件处理程序附加到元素.click()，因此此时它需要在那里。
This can be guaranteed if you check for the page ready:
如果您检查以下内容，则可以保证这一点page ready：
$(function() {
// your code
});
or window load:
或window load：
$(window).load(function() {
// your code
});
, or if you keep the script in the page, at its end:
，或者如果您将脚本保留在页面中，则在其末尾：
<script type="text/javascript">
// your code
</script>
</body>
Another way is to use delegation:
另一种方法是使用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
});
Have a look about it: http://api.jquery.com/on/
看看它：http: //api.jquery.com/on/
回答by IProblemFactory
It basically tells your browser to run script after all DOMnodes are ready, i.e. downloaded and rendered.
它基本上告诉您的浏览器在所有DOM节点准备就绪后运行脚本，即下载和呈现。
回答by Nemesis02
Try adding the script tag to the bottom of your html page instead of in the header. That is done for performance reasons that way your page appears as fast as possible and the extra javascript stuff is loaded afterwards.
尝试将脚本标记添加到 html 页面的底部而不是页眉中。这样做是出于性能原因，以便您的页面尽可能快地显示，然后加载额外的 javascript 内容。
You can read more about this at : How does the location of a script tag in a page affect a JavaScript function that is defined in it?
您可以在以下位置阅读更多相关信息：页面中脚本标记的位置如何影响其中定义的 JavaScript 函数？
回答by Zach Spencer
Wrap the content inside your file in
将文件中的内容包裹在
$(function(){
//js goes here
});
or put the reference to the file at the bottom of your page
或将对该文件的引用放在页面底部
this allows the DOM to load before executing your script.
这允许在执行脚本之前加载 DOM。
