Question

我有一个非常简单的HTML文件，如下所示：

<html>
    <head>
        <script src="jquery-1.11.1.min.js"></script>
        <script src="mainScript.js"></script>
    </head>
    <body>
        <button id = "theButton" type="button">Click Me!</button>
    </body>
</html>

mainScript.js看起来像这样：

$("#theButton").click(function() {
  alert( "Handler for .click() called." );
});

当我点击时没有任何反应。如果我在JS文件中发出警报就会发生。如果我在控制台中运行JS的片段，那么当我单击按钮时它将起作用。我已经测试过jQuery已经加载了，确实如此。我也将此代码放在JS Fiddle中，它可以正常工作（http://jsfiddle.net/ds59ruvu/）。我在本地做什么愚蠢的事情阻止了它的运作？

Answer 1

将代码包含在ready handler中：

$(document).ready(function(){
  // your code here
});

OR，

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

或者，在关闭正文之前移动脚本文件：

<html>
    <head>

    </head>
    <body>
        <button id = "theButton" type="button">Click Me!</button>
        <script src="jquery-1.11.1.min.js"></script>
        <script src="mainScript.js"></script>
    </body>
</html>

Answer 2

您应该使用$(document).ready包装代码：

$(document).ready(function()
{
    $("#theButton").click(function()
    {
        alert( "Handler for .click() called." );
    });
});

问题实际上是脚本是在加载id为“theButton”的元素之前执行的，因此您无法使用$("#theButton")选择它。

javascript代码没有在本地正确执行，但在JS Fiddle中有效

2 个答案: