11

我是学习 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 模板中工作的最干净/最好的方法是什么？

谢谢您的回答。

4

4 回答 4

13 
$(document).ready(function() {

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

});
于 2013-07-11T18:01:40.290 回答
10

您需要 $(function() { ... }) 才能使您的点击功能正常工作。它告诉 jquery 文档已加载并且可以开始在 DOM 上工作。在此之前，DOM 尚未准备好，您的元素可能不存在。

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

于 2013-07-11T18:01:22.947 回答
1

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

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

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

于 2013-07-11T18:02:18.800 回答
0

将scripttest.js 的标签移动到结束标签上方body（或button标签之后）。如果你在你的按钮之前调用你的脚本，那么它找不到带有 id 名称的按钮。如果你把它放在按钮之后，它就会起作用。

于 2015-07-09T16:18:16.520 回答