对特定页面仅使用一次turbolinks:load 事件？

Question

我有一些代码只想在应用程序的一页上运行，因此在 HTML 中我使用以下内联 JS：

<script>
  $(document).on('turbolinks:load', function() {
    console.log("Ground control to major tom?")
  });
</script>

但是，当用户离开该页面时，该代码仍在每次后续访问中运行。

如何仅对特定页面使用turbolinks:load 事件？

我是否需要以某种方式“拆除”该事件处理程序？我如何防止它影响我可能拥有的任何其他 Turbolinks:load 事件？

Answer 1

首先，检查您是否需要在turbolinks:load\xe2\x80\x94 上运行此代码，您可能不需要！<script>包含在页面底部的 s 将可以访问所有 DOM 元素，因此监听turbolinks:load可能不需要侦听。

\n\n

如果您确定需要处理turbolinks:load，以拆除您的处理程序，您有几个选择。

\n\n

选项 1.使用命名函数，然后在调用时引用该函数off。（这种方法将兼容document.removeElementListener。）

\n\n

;(function () {\n  function onLoad () { console.log("Ground control to major tom?") }\n\n  $(document).on(\'turbolinks:load\', onLoad);\n\n  $(document).on(\'turbolinks:before-render\', function() {\n    $(document).off(\'turbolinks:load\', onLoad);\n  });\n})()\n

\n\n

选项 2。为您的事件命名。jQuery 支持自定义事件名称，因此使用这种方法您不需要引用处理程序。

\n\n

$(document).on(\'turbolinks:load.my-namespace\', function() {\n  console.log("Ground control to major tom?")\n});\n\n$(document).on(\'turbolinks:before-render\', function() {\n  $(document).off(\'turbolinks:load.my-namespace\');\n});\n

\n