Question

我有这个工作代码：

<html>
<head>
    <title>Bandom</title>
    <script src="jquery-latest.js"></script>
    <link href="bandom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
    <textarea maxlength="50" id="field1"></textarea>
    <div id="field2"></div>
    <script src="bandom.js" type="text/javascript"></script>
</div>
</body>
</html>

但是当我在head标签的开头调用我的.js文件时，javascript无效。为什么呢？

我所有的javascript都在计算符号。

$('#field1').keyup(function () {
    var left = 50 - $(this).val().length;
    $('#field2').text('Characters left: ' + left);
});

我有很多项目，在某些javascript的位置并不重要，但在某些方面确实如此。任何人都可以向我解释这一点。

Answer 1

但是当我在head标签的开头调用我的.js文件时，javascript无效。为什么呢？

当标记中遇到该标记时，script标记内的代码会立即运行（除非您使用defer或async属性script代码。）

因此，如果script标记位于head中，并且您尝试使用正文中后面定义的元素，那么当代码运行时它们就不存在了。在您的情况下，代码：

$("#field1").keyup(function() { /*...*/});

...找不到任何元素，因此不会挂钩任何处理程序。

当script标记位于下面标记中的元素时（如引号中所示），该元素存在，因此可以找到并使用它。

Best practice是将script标记放在正文的底部，就在结束</body>元素之前。如果你出于某种原因无法做到这一点，那么第二种选择就是使用jQuery＆＃39; ready function。

Answer 2

更改为：

$(document).ready(function() {
    $('#field1').keyup(function () {
        var left = 50 - $(this).val().length;
        $('#field2').text('Characters left: ' + left);
    });
}

为什么我的javascript无效？

2 个答案: