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（source）时触发。

... 或 ...

您可以使用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

Answer 3

使用$(document).on 'ready page:load', ->代替jQuery ->加载dom，您可以在Rails Documentation

上阅读更多内容

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

3 个答案:

对于那些使用Turbolinks的人