CoffeeScript - 使用JQuery On将点击事件绑定到动态加载的对象

Question

我正在重写我的网站前端，使用Coffeescript。我知道如何将点击函数绑定到一个类。

$('.song').click ->
    //code

然而，我在动态加载内容方面遇到了一些问题。我知道在JQuery中，解决这个问题的方法是使用"on"函数，像这样：

$(document).on('click', '.song', function(){
    //code
});

但是我不确定这如何转换为coffeescript。 我认为火箭箭头->在javascript中等同于匿名函数，但如果函数是参数之一，它如何工作？ 我尝试了很多不同的语法，但没有一个似乎可行，谢谢！

- CHawk

Answer 1

通常在 CoffeeScript 中，如果没有括号也能清晰地确定执行顺序，那么就不需要使用括号。因此，可以这样书写：

$(document).on 'click', '.song', ->
    ### code ###

但是当执行顺序不明显时，始终使用括号。

- esamatti

---

这应该是正确的答案！ - mlt

Answer 2

$(document).on('click', '.song', ( ->
    ### code ###
));

翻译成这个 JavaScript：

$(document).on('click', '.song', (function() {
  /* code */
}));

请注意，您可能希望使用=>运算符而不是->; 使用双箭头也会将this绑定到事件处理程序（相当于使用jQuery的bind）。

- Lucero

---

@Epeli，虽然您的编辑也是一种可能性，但这不是我的首选。根据函数的内容，CS有时很难找到结尾，这可以通过显式地放置大括号来解决。我认为CS中的歧义很令人恼火;例如$(document).on返回未调用的on，而do $(document).on则会调用它，$(document).on something也会调用它，而do $(document).on something将调用结果。在参数中使用显式大括号可以使这些混乱变得不那么容易出错。因此，我想要改回去。如果您有自己的观点，请随意发布 - 我会给您点赞的;) - Lucero

Roger和sorry。这似乎是一个显而易见的编辑，因为如果代码执行顺序明确，你很少看到带括号的计算机科学代码。就像在这个简单的例子中一样。 - esamatti

@Epeli，说得好，这就是为什么我要解释一下。在模块化SPA中运行数千行CS代码，并看到我的开发人员在处理某些已解释的行为时感到困难，因此我决定要求在我的组织中使用括号进行方法调用，同时禁止使用“do”。事实上，这有助于保持代码质量高，特别是在代码维护期间。 - Lucero

@Lucero 谢谢 - 在上面的例子中，如何在子函数内操作被点击的元素？非常感谢任何建议。 - BenKoshy

@BKSpurgeon 函数中传递了 event 参数，你可以使用它的 target 属性，这应该是你要找的。 - Lucero

Answer 3

JS2Coffee 可以帮助解决以下类型的问题：

http://js2coffee.org/

使用 js2coffee 时需要小心，因为它有时会遇到比较棘手的 JS 代码，但它令人惊讶地准确，通常至少可以让你接近正确。

- Steve Howell