jquery - 在每个 Turbolinks 页面中使用 jQuery 的委托(delegate)事件 on() :load

Question

我的 Rails 应用程序中有以下代码:

$(document).ready( function() {
  myCustomFunction("#link-selector");
}

function myCustomFunction(linkCssSelector){
  // some stuff...

  $(document).on('click', linkCssSelector, function(){ 
    // ...some other stuff...
  });
}

click 事件处理已委托(delegate)给文档，但现在我必须将 Turbolinks 添加到我的应用中。

然后，我将使用 ready() 函数并执行以下操作(基于我的搜索):

$(document).on("ready page:load", function() {
  myCustomFunction("#link-selector");
}

但是一些引用文献告诉我不要在页面加载中添加绑定(bind)，因为每次涡轮链接加载某些内容时它都会创建另一个绑定(bind)。这是相当合理的。但是，就我而言，我已经将 click 事件委托(delegate)给 myCustomFuntion 内的 document。

问题是:我可以在每次页面加载时运行此事件委托(delegate) on() 函数吗？

观察:问题也可以改写:在多次页面加载后，从长远来看，此代码会造成麻烦吗？

观察2:我无法从 myCustomFunction 内部进行 click 事件处理，因为它取决于之前完成的计算。

Answer 1

将事件处理程序添加到文档 page:load 上的文档将如您所读，创建重复的处理程序。尝试运行下面的片段:

(在点击我!之前多次点击触发页面:加载)

$(document).on('page:load', function(){
    $(document).on('click', '#test', function(){
      $("#log").append('<li>clicked!</li>');
    });
});
$("#page_load").on('click', function(){
  $(document).trigger('page:load');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="page_load">Trigger page:load</button>
<button id="test">Click me!</button>
<ul id="log"></ul>

Turbolinks 的工作原理基本上是通过 Ajax 加载页面并替换文档内容。

当它从 DOM 中删除旧页面时，它确实会尝试清理事件处理程序 - 但由于您的处理程序绑定(bind)到文档，因此不会被删除。

您可以相对安全地将处理程序应用于 DOM 元素，例如 body，因为 Turbolinks 会删除文档并替换内容。