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

Posted 2023-03-03

【中文标题】CoffeeScript - 使用 JQuery 将点击事件绑定到动态加载的对象

【英文标题】：CoffeeScript - Binding Click Events to Dynamically Loaded Objects With JQuery On

【发布时间】：2012-02-11 00:29:26

【问题描述】：

正在用 Coffeescript 重写我网站的前端。我了解如何将点击功能绑定到类。

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

但是，我在动态加载内容时遇到了一些问题。我知道在 JQuery 中，解决方案是像这样使用“On”函数：

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

但我不确定这如何转化为咖啡脚本。我的印象是火箭箭头 - > 转换为 javascript 中的匿名函数，但如果函数是参数之一，它如何工作？我已经尝试了很多不同的语法，但它们似乎都不起作用，谢谢！

【参考方案1】：

如果没有括号执行顺序是明确的，通常不要在 CoffeeScript 中使用括号。所以可以这样写：

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

当然，当执行顺序不明显时，总是使用方括号。

【讨论】：

这应该是的答案！

【参考方案2】：

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

http://js2coffee.org/

您需要对 js2coffee 小心一点，因为它有时会遇到相当棘手的 JS 代码，但它出奇地准确，而且通常至少能让您非常接近。

【参考方案3】：

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

翻译成这个 JavaScript：

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

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

【讨论】：

@Epeli，虽然您的编辑也有可能，但这不是我的偏好。根据函数的内容，CS 很难找到结尾，这可以通过显式放置大括号来解决。我发现 CS 中的模棱两可很烦人； $(document).on 例如返回 on 而不调用它，do $(document).on 调用它，$(document).on something 也调用它，do $(document).on something 将调用结果。使用显式大括号作为参数使这种混乱不太容易出现错误恕我直言。因此，我将进行编辑。随意张贴你自己的 - 我会赞成的。 ;)

罗杰，对不起。这似乎是相当明显的编辑，因为如果代码执行顺序清晰，您很少看到带括号的 CS 代码。就像这个简单的例子一样。

@Epeli，很公平，这就是我解释自己的原因。有数千行 CS 代码在模块化 SPA 中运行，并且看到我的开发人员正在为一些解释的行为而苦苦挣扎@。这实际上有助于保持高代码质量，尤其是在代码维护期间。

@Lucero 谢谢 - 在上面的例子中，如何对子功能中点击的元素进行操作？非常感谢任何建议

@BKSpureon event 参数被传递给函数，在它上面你有 target 属性，这应该是你要找的。​​span>