javascript - 单击事件上的 CoffeeScript 不起作用

标签 javascript jquery html css coffeescript

我是 CoffeeScript 和 JS 的新手。我试图在单击 div 时创建警报,但我不确定为什么我的代码不起作用。所有这些文件都在同一个目录中。

first.coffee

$('#button').on 'click', -> alert 'Hello World!'

我在 button 之前尝试过使用和不使用散列。

编译后:

first.js

// Generated by CoffeeScript 1.12.4
(function() {
  $('#button').on('click', function() {
    return alert('Hello World!');
  });

}).call(this);

HTML 看起来像这样。我也尝试过将脚本移到标题中,但我认为这没有什么不同。

first.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CoffeeScript</title>
        <link rel="stylesheet" type="text/css" href="first.css">
    </head>
    <body>
        <div id='button'></div>
        <script src='first.js'></script>
    </body>
</html>

以及 div 的样式:

first.css

#button {
    width: 100px;
    height: 100px;
    background-color: black;
}

最佳答案

您需要在脚本之前添加对 jQuery javascript 库的引用

<body>
    <div id='button'></div>
    <script src='/path/to/jquery-3.1.1.min.js'></script>
    <script src='first.js'></script>
</body>

您需要将 jQuery 下载到您的系统并提供正确的路径。

关于javascript - 单击事件上的 CoffeeScript 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42843826/

相关文章:

javascript - 从函数外部访问局部变量

javascript - 动态生成的行上的 jQuery 日期选择器

html - 表格后面的按钮会自动添加为一行。如何将它们分开?

javascript - 如何向 slider 添加项目符号导航

javascript - 如何使用jquery动态添加一行到ejs中的表中?

javascript - 如何在俄罗斯方 block 中分别在图案的每个矩形上设置图像

javascript - 有没有一种方法可以在 js 函数上使用 babelJS 并即时生成产量?

jquery - 访问 iframe 父级中的 div

javascript - 如果用户在 div 外部单击,如何隐藏 div?

python - 奇怪的 block /扩展在 Django 中进行的交互