Question

我是初学者，学习jQuery和web开发，所以这可能是一个愚蠢的问题，但我无法在Google上找到答案（可能我没有找到合适的关键字）。我有一个简单的HTML文件（比如'test.html'加载jQuery，我写的外部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模板中工作的最干净/最好的方法是什么？

感谢您的回答。

Answer 1

$(document).ready(function() {

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

});

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

4 个答案: