不能linkjQuery

Question

这是我的 HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
    <meta charset="UTF-8">
    <title>RNG</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6 text-center">

            <h1>Random Number Generator</h1>

            <button class="btn btn-primary" id="generateButton">Generate</button>

            <p id="randomNumber"></p>

        </div>
        <div class="col-md-3"></div>

    </div>

</div>
</body>
</html>

还有我的JS/jQuery：

$("#generateButton").on("click", function() {
    alert("Hello");
})

如果您想知道为什么我的随机数生成器唯一应该做的就是说 "Hello"，那是因为我试图弄清楚为什么我的代码无法正常工作，然后我发现结果是 jQuery 不工作。

虽然文件 'script.js' 链接正确，因为当我尝试没有 jQuery 代码的普通 JS 警报时，它工作正常。

这是我链接到 jQuery:

的代码部分

<!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>

是的，我从 3 个不同的来源链接 jQuery，以防万一。那是因为第一个不行，第二个也不行，所以我只是想确定一下。

Answer 1

假设 script.js 是您的代码所在的位置，当您这样做时

<script src="script.js"></script>

没有$("#generateButton")。您可以将脚本移动到 </body> 之前，或者将代码包装在

中

$(function() {
    //your code goes here
});

告诉它在执行之前等待文档加载。

Answer 2

您只是在加载之前放置您的代码jquery，您应该将您的脚本放置在之后而不是之前。

在编程中导入或加载 lib 在使用其中的内容之前是有意义的

$(function(){
  $('#generateButton').click(function(){
     alert("functional");
   })
})

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.js" type="text/javascript"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
    <meta charset="UTF-8">
    <title>RNG</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6 text-center">

            <h1>Random Number Generator</h1>

            <button class="btn btn-primary" id="generateButton">Generate</button>

            <p id="randomNumber"></p>

        </div>
        <div class="col-md-3"></div>

    </div>

</div>
</body>
</html>

不能linkjQuery

Can't link jQuery

javascript

jquery

delegation

head