ducument.ready不生效的问题 ruby on rails

最新推荐文章于 2022-04-29 23:14:05 发布

原创最新推荐文章于 2022-04-29 23:14:05 发布 · 815 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Turbolinks

Turbolinks 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了Rails应用中使用Turbolinks时JavaScript的正确加载方式。介绍了如何利用turbolinks:load事件来确保脚本在页面加载和变化时正确执行，并对比了传统的$(document).ready方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 readyevents. 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

<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>