Rails 4：如何使用带有turbo-links的$（document）.ready（）

本文翻译自：Rails 4: how to use $(document).ready() with turbo-links

I ran into an issue in my Rails 4 app while trying to organize JS files "the rails way". 我试图组织JS文件“rails way”时，在我的Rails 4应用程序中遇到了一个问题。 They were previously scattered across different views. 他们以前分散在不同的观点中。 I organized them into separate files and compile them with the assets pipeline. 我将它们组织成单独的文件，并使用资产管道进行编译。 However, I just learned that jQuery's "ready" event doesn't fire on subsequent clicks when turbo-linking is turned on. 但是，我刚刚了解到，当打开turbo-linked时，jQuery的“就绪”事件不会触发后续点击。 The first time you load a page it works. 第一次加载页面时它可以工作。 But when you click a link, anything inside the ready( function($) { won't get executed (because the page doesn't actually load again). Good explanation: here . 但是当你点击一个链接时， ready( function($) {任何内容ready( function($) {都不会被执行（因为页面实际上没有再次加载）。好的解释：这里。

So my question is: What is the right way to ensure that jQuery events work properly while turbo-links are on? 所以我的问题是：在启用turbo-links时，确保jQuery事件正常工作的正确方法是什么？ Do you wrap the scripts in a Rails-specific listener? 您是否将脚本包装在特定于Rails的侦听器中？ Or maybe rails has some magic that makes it unnecessary? 或者也许rails有一些魔力让它变得不必要？ The docs are a bit vague on how this should work, especially with respect to loading multiple files via the manifest(s) like application.js. 文档对于它应该如何工作有点模糊，特别是关于通过像application.js这样的清单加载多个文件。

#1楼

参考：https://stackoom.com/question/1Gl4H/Rails-如何使用带有turbo-links的-document-ready

#2楼

Here's what I do... CoffeeScript: 这就是我做的...... CoffeeScript：

ready = ->...your coffeescript goes here...$(document).ready(ready)
$(document).on('page:load', ready)

last line listens for page load which is what turbo links will trigger. 最后一行侦听页面加载，这是turbo链接将触发的内容。

Edit ...adding Javascript version (per request): 编辑 ...添加Javascript版本（按请求）：

var ready;
ready = function() {...your javascript goes here...};$(document).ready(ready);
$(document).on('page:load', ready);

Edit 2 ...For Rails 5 (Turbolinks 5) page:load becomes turbolinks:load and will be even fired on initial load. 编辑2 ...对于Rails 5（Turbolinks 5） page:load变为turbolinks:load ，甚至会在初始加载时触发。 So we can just do the following: 所以我们可以做到以下几点：

$(document).on('turbolinks:load', function() {...your javascript goes here...});

#3楼

Either use the 要么使用

$(document).on "page:load", attachRatingHandler

or use jQuery's .on function to achieve the same effect 或者使用jQuery的.on函数来实现相同的效果

$(document).on 'click', 'span.star', attachRatingHandler

see here for more details: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html 有关详细信息，请参阅此处： http ： //srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html

#4楼

I just learned of another option for solving this problem. 我刚学会了解决这个问题的另一种选择。 If you load the jquery-turbolinks gem it will bind the Rails Turbolinks events to the document.ready events so you can write your jQuery in the usual way. 如果加载jquery-turbolinks gem，它会将Rails Turbolinks事件绑定到document.ready事件，这样你就可以用通常的方式编写jQuery。 You just add jquery.turbolinks right after jquery in the js manifest file (by default: application.js ). 你只需要添加jquery.turbolinks之后jquery在js清单文件（默认： application.js ）。

#5楼

NOTE: See @SDP's answer for a clean, built-in solution 注意：请参阅@ SDP的答案，了解干净的内置解决方案

I fixed it as follows: 我把它固定如下：

make sure you include application.js before the other app dependent js files get included by changing the include order as follows: 通过更改include顺序，确保在包含其他应用程序相关js文件之前包含application.js，如下所示：

// in application.js - make sure `require_self` comes before `require_tree .`
//= require_self
//= require_tree .

Define a global function that handles the binding in application.js 定义一个处理application.js绑定的全局函数

// application.js
window.onLoad = function(callback) {// binds ready event and turbolink page:load event$(document).ready(callback);$(document).on('page:load',callback);
};

Now you can bind stuff like: 现在你可以绑定像：

// in coffee script:
onLoad ->$('a.clickable').click => alert('link clicked!');// equivalent in javascript:
onLoad(function() {$('a.clickable').click(function() {alert('link clicked');
});

#6楼

Recently I found the most clean and easy to understand way of dealing with it: 最近我找到了最简洁易懂的处理方式：

$(document).on 'ready page:load', -># Actions to do

OR 要么

$(document).on('ready page:load', function () {// Actions to do
});

EDIT 编辑
If you have delegated events bound to the document , make sure you attach them outside of the ready function, otherwise they will get rebound on every page:load event (causing the same functions to be run multiple times). 如果您已将委托事件绑定到document ，请确保将它们附加到ready函数之外，否则它们将在每个page:load上反弹page:load event（导致相同的函数多次运行）。 For example, if you have any calls like this: 例如，如果您有任何这样的调用：

$(document).on 'ready page:load', ->...$(document).on 'click', '.button', ->......

Take them out of the ready function, like this: 将它们从ready功能中取出，如下所示：

$(document).on 'ready page:load', ->......$(document).on 'click', '.button', ->...

Delegated events bound to the document do not need to be bound on the ready event. 绑定到document委托事件不需要绑定到ready事件。

Rails 4：如何使用带有turbo-links的$（document）.ready（）相关推荐

JavaWeb项目笔记包括jsp的用法selevt,HTML5
-------------------<认识HTML5>----------------- 1 <>生成的快捷键是table键 ctrl+D是直接复制一行 2 <h1& ...
bdd cucumber_如何使用BDD构建坚如磐石的Ruby on Rails应用
bdd cucumber by Marko Anastasov 通过Marko Anastasov 如何使用BDD构建坚如磐石的Ruby on Rails应用 (How to build rock-s ...
ckeditor回显带标签_Spring Boot中带有CKEditor的AJAX
ckeditor回显带标签 1.概述在本文中,我们将介绍如何在Spring Boot中使用CKEditor . 在本教程中,我们将导入一个包含大量数据的XML文档,对使用GET请求将一组数据加载到C ...
Spring Boot中带有CKEditor的AJAX
1.概述在本文中,我们将介绍如何在Spring Boot中使用CKEditor . 在本教程中,我们将导入一个包含大量数据的XML文档,对使用GET请求将一组数据加载到CKEditor实例的能力进行 ...
html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
ruby on rails_如何在Ruby on Rails应用中用Vue.js替换jQuery
ruby on rails by Igor Petrov 通过伊戈尔·彼得罗夫(Igor Petrov) 如何在Ruby on Rails应用中用Vue.js替换jQuery (How to repl ...
bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
bootstrap 获取表格修改的结果_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
web页面uri唤醒应用_带有数据URI的高性能Web设计
web页面uri唤醒应用我们最近在Webdesigntuts +上介绍了Web设计中的数据URI的内容,原因和方式 ,在其中研究了使用数据URI进行性能友好的界面设计的一些可能性. 在今天的Prem ...

Rails 4：如何使用带有turbo-links的$（document）.ready（）

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

Rails 4：如何使用带有turbo-links的$（document）.ready（）相关推荐

最新文章

热门文章