为什么jQuery click在包含在单独的文件中时不起作用

我是一个学习jQuery和web开发的初学者，所以这可能是一个愚蠢的问题，但我无法在Google上找到答案（可能我没有找到合适的关键字）。 我有一个简单的HTML文件（比如’test.html’加载jQuery，我写的外部javascript文件（比如’test.js’），并且里面有一个按钮。例如，

 ....   ....  test   

在’test.js’中，我有：

 $( "#my_button" ).click(function() { alert('test'); return false; }); 

但是，当我点击按钮时，它不起作用。 但是，当我把’test.js’中的内容放在’test.html’中时，就像这样：

  ....   $(function() { $( "#my_button" ).click(function() { alert('test'); return false; }); });  ....  test   

有用。 第一个问题是：有人可以解释为什么当我在外部文件中插入代码并加载它时它会起作用吗？ 是否总是需要用$(function() {......}来包装jQuery代码才能工作？

理想情况下，我不想在我的HTML模板中使用javascript代码，因为它显然很混乱。 相关/第二个问题是：如上所述分离javascript / jQuery代码并使其在预期的HTML模板中工作的最干净/最好的方法是什么？

谢谢您的回答。

Answer 1

你需要让$（function（）{…}）让你的点击function起作用。 它告诉jquery文档已加载，它可以开始在DOM上工作。 在此之前，DOM尚未就绪，您的元素可能不存在。

编辑：也可以将此用于您的外部文件，除非您更高级，并知道何时不使用它。

Answer 2

 $(document).ready(function() { $( "#my_button" ).click(function() { alert('test'); return false; }); }); 

Answer 3

对jquery的事件绑定需要已经呈现的HTML对象才能工作。

如果你说$('#button').click(function(){dosomething()}); 你需要#button已经存在于HTML上才能工作。

当你使用$(function(){}); 代码等待记录就绪事件以执行代码。 所以，如果你在错误的时间调用button.click它将找不到按钮并且不起作用。

Answer 4

将test.js的script标记移到关闭body标记上方（或button标记之后）。 如果在按钮之前调用脚本，则无法找到具有id名称的按钮。 如果你把它放在按钮之后，那么它将起作用。