ducument.ready不生效的问题 ruby on rails
rails web app页面之间的跳转的时候使用ducument.ready只有在再次加载的时候才生效, 因为rails用了turbolinks,
https://github.com/turbolinks/turbolinks/blob/master/README.md#running-javascript-when-a-page-loads
Running JavaScript When a Page Loads
You may be used to installing JavaScript behavior in response to the window.onload
, DOMContentLoaded
, or jQuery ready
events. With Turbolinks, these events will fire only in response to the initial page load—not after any subsequent page changes.
In many cases, you can simply adjust your code to listen for the turbolinks:load
event, which fires once on the initial page load and again after every Turbolinks visit.
document.addEventListener("turbolinks:load", function() {
// ...
})
When possible, avoid using the turbolinks:load
event to add event listeners directly to elements on the page body. Instead, consider using event delegation to register event listeners once on document
or window
.
$(document).ready
依赖于DOMContentLoaded
事件- Turbolinks 接管页面后换页不会产生
DOMContentLoaded
,所以换页之后$(document).ready
无效 - Turbolinks 提供了
page:change
取代$(document).ready
- 现在第一次加载也会触发
page:change
了,所以page:change
可以替代$(document).ready
要注意 turbolinks 会缓存访问过的页面,缓存 restore 的时候也会触发 page:chang
,这样的代码在用户后退的时候会重复绑定:
$(document).on 'page:change', ->
$('body').on 'click', ->
console.log('hit')
page:change
和 $().ready
逻辑一样,区别是 turbolinks restore 的时候页面带着之前的状态,而传统页面后退的时候是干净的。
如果要用 turbolinks,最好就用 page:change
,并且要写可以反复执行不冲突的代码。
现在用 page:change
很少,换成这样写:
$(document).on 'click', 'body', ->
console.log('hit')
还有个 page:load
,考虑到 restore 的问题,page:load
才是对应 $().ready
document.addEventListener("turbolinks:load",
function() {
if ($('#component_component_type').attr("data-value") == "display_item") {
$('.display-item-select').show();
$('.grid-select').hide();
} else if($('#component_component_type').attr("data-value") == "grid") {
$('.grid-select').show();
$('.display-item-select').hide();
} else {
$('.grid-select').hide();
$('.display-item-select').hide();
}
}) $(document).on('change', '#component_component_type_id', function(e) {
if ($('#component_component_type_id').find("option:selected").text() == "display_item") {
$('.display-item-select').show();
$('.grid-select').hide();
} else if($('#component_component_type_id').find("option:selected").text() == "grid") {
$('.grid-select').show();
$('.display-item-select').hide();
} else {
$('.grid-select').hide();
$('.display-item-select').hide();
}
});
ducument.ready不生效的问题 ruby on rails的更多相关文章
- 10 steps to get Ruby on Rails running on Windows with IIS FastCGI- 摘自网络
Since the original tech preview release of FastCGI last year, we've been seeing a lot of requests fo ...
- ruby on rails在fedora18上install
ruby on rails 在fedora18下的安装 天朝的网络原因,安装不是很顺畅,所以把过程记录下备用 前面下载rubygem什么的都比较快,新建一个project的时候会出问题 gem new ...
- Fedora 16下安装ruby on rails
Fedora 16下安装ruby on rails 最近在windows下写了些rails小程序,问题一个接一个,到最后终于坚信了那句话“windows不适合用于ruby on rails开发”.于是 ...
- 用VirtualBox和vagrant在win7×64上搭建ruby on rails 开发环境
下载准备 1.vagrant 官方 WINDOWS Universal (32 and 64-bit) http://www.vagrantup.com/downloads.html 2.Virtu ...
- How To Use PostgreSQL with Your Ruby on Rails Application on Ubuntu 14.04
How To Use PostgreSQL with Your Ruby on Rails Application on Ubuntu 14.04 链接来自于:https://www.digitalo ...
- Linux超快速安装Ruby on Rails
Linux超快速安装Ruby on Rails 时间 2014-11-25 11:45:11 Flincllck Talk 原文 http://www.flincllck.com/quick-ins ...
- 管理不同版本ruby和rails的利器——rvm
近年来,ruby on rails逐渐火了起来,我想各位码农早就耳闻,特别是那些做B/S项目的童鞋,早就想跃跃一试了. 笔者也是初次接触ruby on rails ,我想,对于初学者来说,最好的学习方 ...
- ruby on rails on windows
这次想系统学会rails,最终目标是将redmine改造成顺手的工具,主要的手段就是开发redmine插件.虽然网上都推荐使用类Unix系统,可手头只有win7系统,就安装了. 难免会遇到这样那样的问 ...
- win8平台下Ruby on Rails的第一个web应用
最近在做一个网站web前端的前期开发,老板要求用Ruby on Rails搭建部署开发环境,上网搜之,发现整个搭建流程比较坑爹,于是用了一款集成软件Bitnami Ruby Stack一键安装到我的w ...
随机推荐
- Nginx与服务器集群在它的配置文件中的配置
- Sublime Text 3 快捷键整理
选择类Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本.Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.Ctrl+L 选中整行,继续操作则继续选择下一行, ...
- 如何保存联系人到系统通讯录(android)
1 效果演示: 2 代码演示:
- WinForm------ToolTipController与GridControl的连用
1.拖入一个ToolTipController控件,和一个GridControl控件 2.设置GridControl中的GridView的中的属性ToolTipController为刚刚拖入的Tool ...
- 安装beautifulsoup4
python scripts下 pip install beautifulsoup4
- Android学习笔记——ProgressBarHandler
该工程的功能是实现点击按钮进度条按10%递增,使用的方式是Handler 以下的代码是MainActivity.java中的代码 package com.example.progressbarhand ...
- JavaScript 的性能优化:加载和执行
随着 Web2.0 技术的不断推广,越来越多的应用使用 javascript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 ...
- 为什么可以用while(cin)?
为什么可以用while(cin)? /** * @brief The quick-and-easy status check. * * This allows you to write const ...
- Debian 8安装ibus输入法
# apt-get install ibus ibus-sunpinyin ibus-table-wubi
- ectouch笔记
1.取消配送方式验证mobile\include\apps\default\controller\FlowController.class.php 第1109行 if (isset($is_real_ ...