如何在Rails中使用Coffeescript绑定jQuery onclick事件？

Question

我意识到我可能需要全局声明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 =>.

Answer 1

我找到了问题的关键 - 我的Coffeescript很好,这是因为一个名为Turbolinks的宝石代码没有触发.它使当前页面实例保持活动状态,并仅替换头部中的正文和标题,这意味着您不能依赖 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.从服务器或客户端缓存加载页面时会触发前一个事件挂钩,而后一个事件挂钩仅在将新的body元素加载到DOM(源)时触发.

...... 或 ......

您可以使用jquery-turbolinks gem.

的Gemfile:

gem 'jquery-turbolinks'

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

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

Answer 2

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

尝试这样的事情，看看你是否得到更好的结果：

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