我是学习 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>
在“test.js”中，我有:
$( "#my_button" ).click(function() {
alert('test');
return false;
});
但是当我点击按钮时，它不起作用。但是，当我将“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>
它有效。第一个问题是:有人可以解释一下为什么当我将代码插入外部文件并加载它时它会起作用吗？是否总是需要用 $(function() {......} 包装 jQuery 代码才能使其正常工作？
理想情况下，我不想在 HTML 模板中包含 JavaScript 代码，因为它显然很困惑。相关/第二个问题是:像上面那样分离 javascript/jQuery 代码并使其在预期的 HTML 模板中工作的最干净/最好的方法是什么？
感谢您的回答。
最佳答案
$(document).ready(function() {
$( "#my_button" ).click(function() {
alert('test');
return false;
});
});
关于jquery - 为什么 jQuery 单击包含在单独的文件中时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17600264/