ducument.ready不生效的问题 ruby on rails
来源:互联网 发布:网络安全法明确了 编辑:程序博客网 时间:2024/06/05 00:31
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 的时候页面带着之前的状态,而传统页面后退的时候是干净的。
page:change
,并且要写可以反复执行不冲突的代码。现在用 page:change
很少,换成这样写:
$(document).on 'click', 'body', -> console.log('hit')还有个
page:load
,考虑到 restore 的问题,page:load
才是对应 $().ready
<code style="box-sizing: border-box; font-family: Monaco, Menlo, 'Courier New', monospace; border-radius: 3px; display: inline-block; border: 0px; margin: 2px; word-break: break-all; line-height: 20px; padding: 1px 4px !important; color: rgb(68, 68, 68) !important; background-color: rgb(245, 245, 245) !important;">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(); } });</code>
- ducument.ready不生效的问题 ruby on rails
- 安装ruby on rails 遇到的问题
- ruby on rails 的 I18n问题
- ruby on rails 安装问题
- Ruby on Rails问题收集
- Ruby on Rails 使用问题
- ruby on rails 的书
- Ruby on Rails的神奇
- ruby on rails的session
- ruby on rails的session
- Ruby On Rails -- Rails的安装
- [讨论]谈谈Ruby on Rails的性能问题
- 安装ruby on rails碰到的两个问题
- [讨论]谈谈Ruby on Rails的性能问题
- [讨论]谈谈Ruby on Rails的性能问题
- [讨论]谈谈Ruby on Rails的性能问题
- Ruby on Rails环境搭建遇到的问题
- ruby on rails 的开发环境配置问题
- Beyond Compare不仅可以快速合并文本
- Jenkins进阶系列之——13修改Jenkins权限控制
- JVM 内存空间分为几部分
- CPPC网络选拔赛 C题 [HDU 5834] Magic boy Bi Luo with his excited tree (树形dp)
- 统计网站访问次数的实现
- ducument.ready不生效的问题 ruby on rails
- Jenkins进阶系列之——14配置Jenkins用户和权限
- ionic 启动页面白屏
- Android studio知识点
- Android app从安装到启动的过程
- 项目08-31
- 装船问题
- ffmpeg加入libass
- Java研发方向如何准备BAT技术面试答案(下)