文章/答案/技术大牛

发布

社区首页 >问答首页 >Rails 4中如何使用$（document）.ready（）和turbo-links？

问Rails 4中如何使用$（document）.ready（）和turbo-links？

提问于 2017-12-26 02:31:06

回答 2关注 0查看 431

我在试图组织JS文件“rails方式”时遇到了Rails 4应用程序中的一个问题。他们以前分散在不同的意见。我把它们组织成单独的文件，并用资产管道进行编译。但是，我刚刚了解到，jQuery的“就绪”事件不会触发涡轮链接打开后续点击。你第一次加载一个页面的作品。但是当你点击一个链接时，内部的任何内容ready( function($) {都不会被执行（因为页面实际上并没有再次加载）。很好的解释：在这里。

所以我的问题是：什么是正确的方式来确保jQuery事件正常运行，而涡轮链接？你把脚本包装在一个Rails特定的监听器中吗？或者，也许铁轨有一些魔法，使之不必要？这个文档对于如何工作有些模糊，特别是通过像application.js这样的清单加载多个文件。

ruby on rails

回答 2

心愿

发布于 2017-12-26 06:09:23

最近我发现了最简单易懂的处理方法：

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

  # Actions to do

要么

$(document).on('ready page:load', function () {

  // Actions to do

});

编辑

如果你有委托的事件绑定到document，确保你把它们附加在ready函数之外，否则它们将在每个page:load事件（导致相同的函数被多次运行）上反弹。例如，如果你有任何这样的电话：

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

...

  $(document).on 'click', '.button', ->

...

...

把它们从ready功能中拿出来，就像这样：

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

...

...

$(document).on 'click', '.button', ->

...

绑定的委托事件document不需要绑定在ready事件上。

akjok54

发布于 2017-12-26 06:08:45

是我做的... CoffeeScript：

ready = ->

  ...your coffeescript goes here...

$(document).ready(ready)

$(document).on('page:load', ready)

最后一行监听页面加载，这是turbo链接将触发的。

编辑 ...添加Javascript版本（每个请求）：

var ready;

ready = function() {

  ...your javascript goes here...

};

$(document).ready(ready);

$(document).on('page:load', ready);

编辑2 ...对于Rails 5（Turbolinks 5）page:load变得turbolinks:load甚至会在初始加载时被解雇。所以我们可以做到以下几点：

$(document).on('turbolinks:load', function() {

  ...your javascript goes here...

});

和开发者交流更多问题细节吧，去写回答

$(function(){})和$(document).ready(function(){})

css

这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

用户7657330

2020/08/14

1.6K0

JS篇(001)-document load 和 document ready 的区别

css

1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数

齐丶先丶森

2022/05/12

1.9K0

【jQuery】window.onload 和 $(document).ready() 的区别

jquery document onload window 事件

window.onload 是DOM中的标准事件，而$(document).ready() 是jQuery中的事件。（显然......）

zhaokang555

2023/10/17

1550

$(window).load()与$(document).ready()的区别

javascript

1.执行时间不同：从字面的意思上理解，$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档，dom树已经建立起来了，这时就可以通过class属性或者id属性等等对dom进行操作等。而$(window).load()就是整个页面已经加载完毕。与前者的区别是dom树虽然已经建立起来了，但页面不一定加载完毕，如一些大的图片等，加载完成就需要一定的时间；但是页面加载完毕后，dom肯定也就建立起来了；但是有些文字或者图片链接等需要在文档加载完毕前，dom树建立后就进行的，这

java达人

2018/01/31

1.1K0

window.onload 与 $(document).ready()比较

javascript

ready事件发生在加载HTML文档之后，而onload事件发生在稍后，此时所有内容（例如图像）也已加载。

IT工作者

2022/01/25

1.6K0

windows.onload()与$(document).ready()的区别

javascript

在jquery中，则使用$(document).ready()方法。下面介绍一下两者的区别。

山河木马

2019/03/05

9700

如何使用Passenger和Nginx部署Rails

nginx ruby

如果您是Ruby on Rails开发人员，可能需要Web服务器来托管您的Web应用程序。本教程将向您展示如何使用Phusion Passenger。作为Rails的Web服务器，Passenger易于安装，配置和维护，可与Nginx或Apache一起使用。在本教程中，我们将在Ubuntu上安装带有Nginx的Passenger。

乌鸦

2018/08/06

5.1K0

jquery当中$(function() 与“$(document).ready(function(){})和 window onload的区别

javascript

马克-to-win：$(function() 与“$(document).ready(function(){})”是一样的，（二者都存在时，谁在前面谁先执行。）只不过头者是简写，二者都是document加载完就执行，不过不包括图片或视频。这一点与window.onload不一样。（no experiment support）例 1.2_b: <html> <head> <title></title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(document).ready(function(){ alert("$(document).ready(function()"); }) $(function(){ alert("$(function()"); }); </script> </head> <body> <h2><a href="#">马克-towin</a>内容</h2> <h2>内容<a href="#">马克-towin</a></h2> </body> </html>

马克java社区

2021/02/01

5270

jquery当中$(function() 与“$(document).ready(function(){})和 window onload的区别

jquery $(document).ready()与window.onload的区别

jquery javascript java

奋飛

2019/08/15

2.3K0

document.ready 与 window.onload的区别

javascript

document的ready事件通常会比window的onload事件先发生，为什么呢？因为document的ready是在浏览器加载解析并构建完doc文档模型时发生的，而window的onload是整个文档的内容加载完成时才会发生。当document文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时，返回"interactive"，并引发DOMContentLoaded事件。当文档加载完成时,返回"complete"，并引发load事件。 readystatechange事件会在

smy

2018/04/03

1.4K0

企业面试题: $(document).ready()方法和window.onload有什么区别？

document dom jq onload window

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

舒克

2019/08/09

7900

如何在Ubuntu上使用Passenger安装Rails和nginx

ubuntu nginx ruby

Ruby on Rails为Web开发人员提供了一个快速创建各种Web应用程序的框架，而nginx是一个轻量级的高性能Web服务器软件。通过Phusion Passenger安装时，可以轻松配置这两个程序，以便在服务器上协同工作。

乌鸦

2018/07/26

3.7K0

如何在Ubuntu 14.04上使用PostgreSQL和Ruby on Rails应用程序

postgresql 数据库 sql ruby on rails ruby

Ruby on Rails使用sqlite3作为其默认数据库，在许多情况下效果很好，但可能不适合您的应用程序。如果您的应用程序需要客户端/服务器SQL数据库（如PostgreSQL或MySQL）提供的可伸缩性，集中化和控制（或任何其他功能），则需要执行一些其他步骤才能启动并运行它。

温浪

2018/10/22

3.5K0

window和document

document window 对象函数浏览器

window和document 都是网页中的JavaScript对象。 window对象：就是这个浏览器的窗口，可以通过window获取宽度、高度、网页跳转 document对象：可以通过函数获取网页中标签，然后通过js操作标签代码实战新建 html 文件 20-window.html，编写下方程序，运行看看效果吧 <!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equi

鹤川

2023/03/21

5840

如何在Ubuntu 14.04上使用MySQL和Ruby on Rails应用程序

云数据库 SQL Server 数据库 sql ruby on rails ruby

Ruby on Rails使用sqlite3作为其默认数据库，在许多情况下效果很好，但可能不适合您的应用程序。如果您的应用程序需要客户端/服务器SQL数据库（如PostgreSQL或MySQL）的可伸缩性，集中化和控制（或任何其他功能），则需要执行一些额外的步骤才能启动并运行它。

信姜缘

2018/10/22

4.9K0

document.getElementBy... 和 document.querySelector

css

document.querySelector('.text'）； // 方法返回类名为text的第一个子元素。

愤怒的小鸟

2021/04/11

1K0

点击加载更多

相似问题

window.onload 和 $（document）.ready（）有何区别？

2551

imwebsdk实例没有ready了吗？

0265

微信小程序接入TIM如何进入ready状态？？？

21.1K

如何使用Rails迁移删除列？

2359

document.querySelector始终返回null？arrowLeft 和arrowright获取不到

1364

问Rails 4中如何使用$（document）.ready（）和turbo-links？

回答 2

心愿

akjok54

window.onload 和 $（document）.ready（）有何区别？

imwebsdk实例没有ready了吗？

微信小程序接入TIM如何进入ready状态？？？

如何使用Rails迁移删除列？

document.querySelector始终返回null？arrowLeft 和arrowright获取不到

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐