如何在 Rails 中将 jQuery onclick 事件与 Coffeescript 绑定？答案

【问题标题】：How to bind an jQuery onclick event with Coffeescript, in Rails?如何在 Rails 中将 jQuery onclick 事件与 Coffeescript 绑定？
【发布时间】：2014-06-29 20:57:49
【问题描述】：

我意识到我可能需要全局声明 onclick 事件，但我试图避免在编译时使用 --bare 标记。

这是我正在尝试使用的代码...

jQuery ->
  $('.tabs_image').click ->
    $(this).addClass('tabs_selected')
    $('.tabs_video').removeClass('tabs_selected')
    $('#image_upload_form').show()
    $('#video_upload_form').hide()
    return

  $('.tabs_video').click ->
    $(this).addClass('tabs_selected')
    $('.tabs_image').removeClass('tabs_selected')
    $('#image_upload_form').hide()
    $('#video_upload_form').show()
    return

  return

在浏览器 Chrome 中硬刷新（点击刷新）页面后，它就可以正常工作了。

我试过$ =>、$(document).ready ->和$(document).ready =>。

【问题讨论】：

"在浏览器 Chrome 中刷新页面后，它就可以正常工作了。" 如果内容是动态附加的，you'll have to use delegated events。
@JonathanLonowski 在这种情况下，内容已经存在；它不是动态附加的。不过我会试试的。这是在 Rails 应用程序中，所以我不知道这是否会产生影响

标签： jquery ruby-on-rails coffeescript turbolinks

【解决方案1】：

我找到了问题的症结所在 - 我的 Coffeescript 很好，它是因为一个名为 Turbolinks 的 gem 代码不是触发。它使当前页面实例保持活动状态并仅替换正文和标题在头脑中，这意味着你不能依赖 DOMContentLoaded 或 jQuery.ready() 触发您的代码。这是为什么当页面被硬刷新时脚本似乎可以工作（刷新点击）。

对于那些使用 Turbolinks 的人

如果您想退出特定链接

像这样将data-no-turbolink 添加到链接的父容器中...

<a href="/">Home (via Turbolinks)</a>
<div id="some-div" data-no-turbolink>
  <a href="/">Home (without Turbolinks)</a>
</div>

如果您有很多现有的 JavaScript 将元素绑定到 jQuery.ready()

使用事件挂钩page:change，您可以将jQuery.ready() 替换为$(document).on 'page:change', ->，或者更好的是$(document).on 'ready page:change', ->；更好，因为这意味着即使 turbolinks 没有运行（因为可能是在旧的浏览器版本上），由于ready 在那里，调用仍然会触发。

最好使用page:change 而不是page:load。前一个事件挂钩在页面从服务器或客户端缓存加载时触发，而后一个事件挂钩仅在新的正文元素加载到 DOM 时触发 (source)。

...或...

您可以使用jquery-turbolinks gem。

宝石文件：

gem 'jquery-turbolinks'

bundle install，然后按以下顺序将其添加到您的 JavaScript 清单文件中：

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

【讨论】：

【解决方案2】：

我认为无论如何你都应该使用事件委托。

试试这样的方法，看看你是否能得到更好的结果：

$ ->
  $('body').on 'click', '.tabs_image', ->
    # do stuff

【讨论】：

“我认为无论如何你都应该使用事件委托。” 为什么，鉴于 “在这种情况下，内容已经存在；它不是动态的附加。”
@nick 谢谢，我试过这个，但没有帮助。我感觉我在 Rails 中发现了一个错误
现在我知道这是因为Turbolinks，使用钩子page:load 可以将$ -> 替换为$(document).on 'page:load', -> 或$(document).on 'ready page:load', ->
@KevinB 因为如果有多个匹配的选择器，您将多次附加相同的事件。它可能导致内存泄漏。对于大多数应用程序来说可能是边缘情况，但通常仅使用事件委托来应对这些潜在挑战并没有错。 PPK 在“焦点问题”之前的句子中提到了它：quirksmode.org/blog/archives/2008/04/delegating_the.html

【解决方案3】：

使用 $(document).on 'ready page:load', -> 而不是 jQuery -> 加载 dom，您可以在 Rails Documentation 上阅读更多信息

【讨论】：

最好使用page:change而不是page:load (source)