jQuery JavaScript 代码未在浏览器中执行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18295977/
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 code not executing in browser
提问by Mary
I'm trying to learn programming from various online tutorials, and I've been trying to figure out this issue for about the last three days with no success. I have three files (myindex.html, stylesheet.css, and jscript.js) and I'm trying to make sure that everything is properly linked up before I start experimenting with different things.
我正在尝试从各种在线教程中学习编程，过去三天我一直在努力解决这个问题，但没有成功。我有三个文件（myindex.html、stylesheet.css 和 jscript.js），在开始尝试不同的东西之前，我试图确保所有内容都正确链接。
MyIndex.html file contains:
MyIndex.html 文件包含：
<!DOCTYPE>
<HTML>
<head></head>
<title>Mary</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<body>
<div ID="contact">Hello</div>
</body>
</HTML>
my stylesheet.css file contains:
我的 stylesheet.css 文件包含：
#contact {
height: 100px;
width: 100px;
background-color: #517F8F;
border-radius: 25px;
border: 2px solid blue;
text-align: center;
display: block;
vertical-align: middle;
line-height: 100px;
}
my jscript.js file contains:
我的 jscript.js 文件包含：
$(document).ready(function(){
$('#contact').click(function(){
$(this).hide();
}();
});
I keep dragging the file into chrome to see if it will work. It shows the div element, but won't hide it when clicked. After much frustration, I entered all of the info into jsfiddle and it says it works properly and in the result window if I click the element, it hides like it's supposed to. I'm using sublime to edit it, but I've also tried notepad++. I can't figure out why it's not working correctly when I drag the index file into the browser. I know this is probably a silly question, and I sincerely appreciate any advise.
我一直将文件拖到 chrome 中，看看它是否可以工作。它显示 div 元素，但在单击时不会隐藏它。在经历了很多挫折之后，我将所有信息输入到 jsfiddle 中，它说它可以正常工作，如果我单击该元素，它会在结果窗口中像它应该隐藏的那样隐藏。我正在使用 sublime 来编辑它，但我也尝试过 notepad++。当我将索引文件拖入浏览器时，我无法弄清楚为什么它无法正常工作。我知道这可能是一个愚蠢的问题，我真诚地感谢任何建议。
UPDATE!!
更新！！
After fixing my errors, my code looks like this:
修复错误后，我的代码如下所示：
MyIndex.html
我的索引.html
<!DOCTYPE HTML>
<HTML>
<head></head>
<title>Mary Bishop</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="jscript.js"></script>
<body>
<div ID="contact">Hello</div>
</body>
</HTML>
Stylesheet.css hasn't changed.
Stylesheet.css 没有改变。
the jscript.js file is
jscript.js 文件是
$(document).ready(function(){
$('#contact').click(function(){
$(this).hide();
});
});
I open it in google chrome and it gives me {}. That's it. Just a pair of braces in the top left corner of the page. I tried the inspect element function, but I'm not really sure what I'm looking for there. If it's telling me that there is an error, it's not showing me what that error is.
我在谷歌浏览器中打开它，它给了我 {}。就是这样。只是页面左上角的一对大括号。我尝试了检查元素功能，但我不确定我在那里寻找什么。如果它告诉我有一个错误，它并没有告诉我那个错误是什么。
回答by Michal
2 things, one is definitely breaking things and the other is just a syntax error.
两件事，一件事绝对是破坏性的，另一件事只是语法错误。
You are missing:
<script type="text/javascript" src="jscript.js"></script>in
MyIndex.html. Include it right after the<script>...</script>tag that includes jQuery*. This tells the browser where your JavaScript file is, just like including your stylesheet in thatlinkelement.The
}();should be});in the 4th line of yourjscript.jsfile.
你不见了：
<script type="text/javascript" src="jscript.js"></script>在
MyIndex.html。将它包含在<script>...</script>包含 jQuery*的标签之后。这会告诉浏览器您的 JavaScript 文件在哪里，就像在该link元素中包含您的样式表一样。本
}();应该是});在你的第4行jscript.js的文件。
*Note: You could instead include your jscript.jsfile right after your <div ID="contact">Hello</div>before the end of your bodytag. Either place will work, you simply must place it after the jQuery. But including it within the bodytag after all your HTML elements speeds up the rendering of the page slightly, because the browser doesn't go fetch your jscript.jsfile until after it loads the rest of your body. Since you are waiting for the document to be ready anyway, it is a small performance gain.
*注意：您可以在标签结束之前立即包含您的jscript.js文件。任何一个地方都可以，你只需要把它放在 jQuery 之后。但是在所有 HTML 元素之后将它包含在标签中会稍微加快页面的呈现速度，因为浏览器在加载. 由于您无论如何都在等待文档准备就绪，因此这是一个很小的性能提升。<div ID="contact">Hello</div>bodybodyjscript.jsbody
回答by agpt
Try in below manner:
尝试以下方式：
<!DOCTYPE>
<HTML>
<head></head>
<title>Mary</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#contact').click(function()
{
$(this).hide();
});
});
</script>
<body>
<div ID="contact">Hello</div>
</body>
</HTML>
Sicne You already targeting to google cdn for jquery lib, you just need to mention another Scriptblock and use jquery methods as you wish to use. (Another thing, you have mentioned in your question that you are using jscript.jsbut I could not find it anywhere in your html code.)
Sicne 您已经针对 jquery lib 的 google cdn，您只需要提及另一个Script块并使用您希望使用的 jquery 方法。（另一件事，您在问题中提到您正在使用jscript.js，但我在您的 html 代码中找不到它。）
回答by federico-t
Seems that you're not including your jscript.jsfile. That would explain why it works in JSFiddleand not in your browser. Just add this line under your jQuerylibrary inclusion:
似乎您没有包含您的jscript.js文件。这将解释为什么它适用于JSFiddle而不是您的浏览器。只需在您的jQuery库包含下添加这一行：
<script type="text/javascript" src="jscript.js"></script>
回答by Swaroop Nagendra
<!DOCTYPE>
<HTML>
<head></head>
<title>Mary</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet"></link>
<body>
<div ID="contact">Hello</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/jsscript.js"> </script>
</body>
</HTML>
Place script tag at the end, just before closing body tag. Use relative protocol always and always have a fall back ready.
将 script 标签放在最后，就在关闭 body 标签之前。始终使用相关协议并始终准备好后备。
Now your code should work.
现在你的代码应该可以工作了。
