为什么 jQuery click 在包含在单独的文件中时不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17600264/
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
Why jQuery click doesn't work when included in a separate file
提问by user1330974
I am a beginner learning jQuery and web development, so this may be a dumb question, but I cannot find an answer to this on Google (probably I'm not searching for the right keywords). I have a simple HTML file (say, 'test.html' that loads jQuery, an external javascript file (say, 'test.js') that I wrote, and have a button in it. For example,
我是学习 jQuery 和 Web 开发的初学者，所以这可能是一个愚蠢的问题，但我无法在 Google 上找到答案（可能我没有搜索正确的关键字）。我有一个简单的 HTML 文件（例如，加载 jQuery 的“test.html”，我编写的外部 javascript 文件（例如，“test.js”），其中有一个按钮。例如，
<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="scripts/test.js" type="text/javascript"></script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>
In 'test.js', I have:
在“test.js”中，我有：
$( "#my_button" ).click(function() {
alert('test');
return false;
});
But when I click on the button, it doesn't work. However, when I put what's in 'test.js' in 'test.html' like this:
但是当我点击按钮时，它不起作用。但是，当我将 'test.js' 中的内容放入 'test.html' 时：
<html>
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$( "#my_button" ).click(function() {
alert('test');
return false;
});
});
</script>
....
<body>
<button type="button" class="button" id="my_button">test</button>
</body>
</html>
It works. First question is: Can someone explain me why it would work when I insert the code in external file and load it? Is that always necessary to wrap jQuery code with $(function() {......}for it to work?
有用。第一个问题是：有人能解释一下为什么当我在外部文件中插入代码并加载它时它会起作用吗？是否总是需要包装 jQuery 代码$(function() {......}才能使其工作？
Ideally, I don't want javascript code in my HTML template because it's obviously messy. Related/second question is: What is the cleanest/best way to separate the javascript/jQuery code like above and yet make it work in the intended HTML template?
理想情况下，我不希望在我的 HTML 模板中使用 javascript 代码，因为它显然很混乱。相关/第二个问题是：像上面那样分离 javascript/jQuery 代码并使其在预期的 HTML 模板中工作的最干净/最好的方法是什么？
Thank you for your answer.
谢谢您的回答。
采纳答案by Thinking Sites
You need to have $(function() { ... }) for your click function to work. It tells jquery that the document is loaded and it can start working on the DOM. Before then, the DOM is not ready and your element might not exist.
您需要有 $(function() { ... }) 才能让您的点击功能正常工作。它告诉 jquery 文档已加载，它可以开始处理 DOM。在此之前，DOM 尚未准备好，您的元素可能不存在。
EDIT:Use this for your external files too, unless you are more advanced and know when NOT to use it.
编辑：也将此用于您的外部文件，除非您更高级并且知道何时不使用它。
回答by simongus
$(document).ready(function() {
$( "#my_button" ).click(function() {
alert('test');
return false;
});
});
回答by Guerra
Event binding on jquery needs the HTML object already rendered to work.
jquery 上的事件绑定需要已经呈现的 HTML 对象才能工作。
If you say $('#button').click(function(){dosomething()});You need #buttonalready exist on HTML to work.
如果你说$('#button').click(function(){dosomething()});你需要#button已经存在于 HTML 上才能工作。
When you use $(function(){});The code waits to document ready event to execute the code.
So, if you call button.click on wrong time it wouldn't find the button and doesn't work.
当您使用$(function(){});代码等待记录就绪事件来执行代码时。所以，如果你在错误的时间调用 button.click 它不会找到按钮并且不起作用。
回答by Ankur Patel
Move your scripttag of test.js just above closing bodytag (or after buttontag). If you call your script before your button, then it can not find button with id name. If you put it after button then it will work.
将您script的 test.js 标签移动到结束body标签上方（或button标签之后）。如果您在按钮之前调用脚本，则它找不到具有 id 名称的按钮。如果你把它放在按钮之后，它就会起作用。
