Ruby on rails 4 轨道4+；涡轮链接+；JQuery Turbolinks+；Coffeescript:事件被多次激发_Ruby On Rails 4_Coffeescript_Turbolinks

Ruby on rails 4 轨道4+；涡轮链接+；JQuery Turbolinks+；Coffeescript:事件被多次激发

ruby-on-rails-4 coffeescript

Ruby on rails 4 轨道4+；涡轮链接+；JQuery Turbolinks+；Coffeescript:事件被多次激发,ruby-on-rails-4,coffeescript,turbolinks,Ruby On Rails 4,Coffeescript,Turbolinks,起初，所有的javascript代码都运行得很好然而，从我导航到另一个页面的那一刻起，任何事件都会被触发多次。如果我刷新页面，一切都会恢复正常在jquery.turbolink文档中，介绍如何在$（function（））块中绑定文档事件。但是，似乎coffescript在默认情况下是这样工作的。那么，我该怎么办这是我的环境：档案： gem 'turbolinks' gem 'jquery-turbolinks' application.js //= require jquery //=

起初，所有的javascript代码都运行得很好

然而，从我导航到另一个页面的那一刻起，任何事件都会被触发多次。如果我刷新页面，一切都会恢复正常

在jquery.turbolink文档中，介绍如何在$（function（））块中绑定文档事件。但是，似乎coffescript在默认情况下是这样工作的。那么，我该怎么办

这是我的环境：

档案：

gem 'turbolinks'
gem 'jquery-turbolinks'

application.js

//= require jquery
//= require jquery.turbolinks
//..app js
//= require turbolinks

application.html.erb

<html>
  <head>
    <meta charset="utf-8">
    <title><%= t 'brand' %> </title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= yield :head %>
    <%= csrf_meta_tags %>
    <meta name="description" content="<%= yield :page_description %>">
    <meta name="keywords" content="<%= yield :page_keywords %>">
  </head>

问题是，显然，coffeescript生成的javascript文件默认位于一个块内。请查看：

controller.js（由coffeescript生成）

那么，我应该如何正确使用coffeescript+JQuery TurboLink呢？我应该进行不同的配置吗

干杯。

问题出在controller.js.coffee中

你写了这个：

$(document).ready ->    
  $(document).on 'click', '.addition .label i', (e) ->
    console.log ".addition .label i 'click' fired!"

但由于您使用的是jQuery TurboLink，因此需要将事件处理程序移到$（文档）之外。ready函数：

$(document).ready ->
  # Other code can go here, but not binding event handlers
$(document).on 'click', '.addition .label i', (e) ->
  console.log ".addition .label i 'click' fired!"

请看下面的图片。它提到了这个问题和解决办法。（在自述文件中搜索“事件触发两次或更多。”）

事实证明，我完全改变了方法

现在，我得到了完全相同的环境，但我使用类来表示每个控制器的javascript。以下是一个例子：

foo.js.coffee：

window.App or= {}

class App.Foo
  constructor: ->
    @$foo_container = $('.foo')
    @bind()

  bind: ->
    console.log 'App.Foo.bind has been fired!'
    @$foo_container.on 'click', '.label i', @foo_clicked

  foo_clicked: (e) =>
    console.log 'App.Foo.foo_clicked has been fired!'
    alert '.label i has been clicked!'

create_foo = ->
  window.app.foo = new App.Foo()
  console.log 'App.Foo has been created!'

$(document).ready create_foo

现在，它就像一个符咒

$(document).ready ->
  # Other code can go here, but not binding event handlers
$(document).on 'click', '.addition .label i', (e) ->
  console.log ".addition .label i 'click' fired!"

window.App or= {}

class App.Foo
  constructor: ->
    @$foo_container = $('.foo')
    @bind()

  bind: ->
    console.log 'App.Foo.bind has been fired!'
    @$foo_container.on 'click', '.label i', @foo_clicked

  foo_clicked: (e) =>
    console.log 'App.Foo.foo_clicked has been fired!'
    alert '.label i has been clicked!'

create_foo = ->
  window.app.foo = new App.Foo()
  console.log 'App.Foo has been created!'

$(document).ready create_foo