Turbolinks 缓存前后的 Javascript DOM 事件

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 和 $(document).ready()。

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

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

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

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

Answer 2

您只需将点击事件从 'turbolinks:load' 和

'turbolinks:before-visit' 上下文。

或者如果按钮是在 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);