Rails 4 + Turbolinks + JQuery Turbolinks + Coffeescript：事件被多次触发
Posted
技术标签:
【中文标题】Rails 4 + Turbolinks + JQuery Turbolinks + Coffeescript：事件被多次触发【英文标题】：Rails 4 + Turbolinks + JQuery Turbolinks + Coffeescript: Events being fired multiple times 【发布时间】：2014-06-25 11:23:17 【问题描述】：一开始，所有 javascript bounded 都运行得很好。
但是，从我导航到另一个页面的那一刻起，任何事件都会被多次触发。如果我刷新页面，一切都会恢复正常。
在 jquery.turbolink 文档中，there is an alert 关于在 $(function()) 块内绑定文档事件。但是，默认情况下，咖啡脚本似乎是这样工作的。那么，我该怎么办？
这是我的环境：
宝石文件：
gem 'turbolinks'
gem 'jquery-turbolinks'
应用程序.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>
controller.js.coffee
$(document).ready ->
$(document).on 'click', '.addition .label i', (e) ->
console.log ".addition .label i 'click' fired!"
问题是，显然由 coffeescript 生成的 javascript 文件默认在一个块内。看看吧：
controller.js（由咖啡脚本生成）
function()
$(document).ready(function()
$(document).on('click', '.addition .label i', function(e)
console.log(".addition .label i 'click' fired!");
);
...
那么，我应该怎么做才能正确使用coffeescript + JQuery Turbolinks？ 我应该进行不同的配置吗？
干杯。
【问题讨论】：
【参考方案1】：问题出在 controller.js.coffee 中。
这是你写的：
$(document).ready ->
$(document).on 'click', '.addition .label i', (e) ->
console.log ".addition .label i 'click' fired!"
但由于您使用的是 jQuery Turbolinks，您需要将事件处理程序移到 $(document).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!"
看看jQuery Turbolinks README。它提到了这个问题和解决方案。 （在自述文件中搜索“事件触发两次或更多”。）
【讨论】：
【参考方案2】：嗯，原来我已经完全改变了方法。
现在，我拥有完全相同的环境，但我使用类来表示每个控制器的 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
现在，它就像一个魅力。 :)
【讨论】：
以上是关于Rails 4 + Turbolinks + JQuery Turbolinks + Coffeescript：事件被多次触发的主要内容，如果未能解决你的问题，请参考以下文章
由于 pagesCached，Rails 4 Turbolinks 后退按钮和多个事件绑定
带有 Turbolinks 的 Rails Bootstrap 4
除非使用 turbolinks 和 rails 4 重新加载页面，否则 javascript 不会执行