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

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

Turbolinks 不会丢弃 document 上的事件监听器，因此您可以安全地将点击处理程序绑定(bind)到它，它们将被称为跨页面加载。来自 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()