在每个turbolinks页面中使用jQuery的委托事件on（）：load

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事件委托给了document中的myCustomFuntion。

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

Obs：问题也可以改写：在加载许多页面之后，从长远来看，此代码是否会引起麻烦？

Obs 2：我不能从myCustomFunction内部进行click事件处理，因为它取决于之前进行的计算。

Answer 1

将事件处理程序添加到文档page:load上的文档后，将像您已经阅读的那样创建重复的处理程序。尝试运行以下片段：

（单击Trigger page：load几次，然后单击Click me！）

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

您可以相对安全地将处理程序应用于body之类的DOM元素，因为Turbolink会剔除文档并替换其内容。