Turbolinks缓存之前和之后的Javascript DOM事件

Question

我在这里：

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

只有在Turbolinks缓存页面后才能使我的click事件可用。我可以做$(document).on 'turbolinks:before-visit，只有在Turbolinks缓存之前才能使事件可用。我应该如何随时提供活动？

Answer 1

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

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

  

如果可能，请避免使用turbolinks：load事件将事件侦听器直接添加到页面主体上的元素。相反，请考虑使用事件委派在文档或窗口上注册一次事件侦听器。

考虑到这一点，你可以这样做：

$(document).on 'click', "button#show-hide", (e) ->
  e.preventDefault()

Answer 2

你如何简单地从“turbolinks：load”和

中取出点击事件

'turbolinks：访问前'的背景。

或者如果在DOM中动态添加按钮，您可以执行的操作是将单击处理程序附加到正文，然后单击确定单击了哪个元素并相应地继续。

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

});

在咖啡脚本中，你可以做到

$('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);