在每个 turbolinks page:load 中使用 jQuery 的委托事件 on()

Question

我的 rails 应用程序中有此代码：

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

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

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

click 事件处理已委托给文档，但现在我必须将 Turbolinks 添加到我的应用程序.

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

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

但是一些参考资料告诉我不要在页面加载中添加绑定，因为它会在每次 turbolinks 加载内容时创建另一个绑定。这是很合理的。但是，就我而言，我已经将 click 事件委托给 myCustomFuntion.

中的 document

问题是：我可以运行这个事件委托 on() 每次页面加载时都正常运行吗？

Obs：问题也可以改写：这段代码会不会在长时间运行中引起麻烦，在加载许多页面之后？

Obs2：我无法从 myCustomFunction 内部获取 click 事件处理，因为它取决于之前完成的计算。

Answer 1

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

(点击触发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 中删除旧页面时，它确实会尝试清理事件处理程序 - 但由于您的处理程序已绑定到文档，因此不会被删除。

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

在每个 turbolinks page:load 中使用 jQuery 的委托事件 on()

using jQuery's delegated event on() within every turbolinks page:load

jquery

ruby-on-rails

ruby-on-rails-4

jquery-events

turbolinks