Javascript DOM Turbolinks 缓存前后的事件

Question

我这里有：

$(document).on 'turbolinks:load', ->
  console.log "page has loaded!"
  $ ->
    $("button#show-hide").click (e) ->
      e.preventDefault()

这使得我的 click 事件仅在 Turbolinks 缓存页面后可用。我可以做 $(document).on 'turbolinks:before-visit 这将使事件仅在 Turbolinks 缓存之前可用。我应该如何让活动始终可用？

Answer 1

你简单地从 'turbolinks:load' 和

中取出点击事件怎么样？

'turbolinks:before-visit' 上下文。

或者如果按钮是在 DOM 中动态添加的，您可以做的是将点击处理程序附加到正文，并在点击时确定点击了哪个元素并相应地进行。

$('body').on('click','button#show-hide',function(){

});

在coffee脚本中，你可以做

$('body').on('click', 'button#show-hide', ( ->

));

更新

来自 Rails, javascript not loading after clicking through link_to helper

上的回答

如果您希望点击处理程序在 page:change 以及 ready 事件上工作，您可以这样做，

var ready = function() {
    // bind click handlers to DOM elements here
};

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

Answer 2

我认为这里的问题是您绑定了两个事件：turbolinks:load 和 $(document).ready()。

Turbolinks 不会丢弃 document 上的事件侦听器，因此您可以安全地将点击处理程序绑定到它，它们将被称为跨页面加载。来自 Turbolinks 文档：

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).on 'click', "button#show-hide", (e) ->
  e.preventDefault()

Javascript DOM Turbolinks 缓存前后的事件

Javascript DOM events before and after Turbolinks cache

javascript

ruby-on-rails

ruby-on-rails-5

turbolinks