Question

我在我的rails app中有这个代码：

$(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加载某些东西时创建另一个绑定。这很合理。但是，就我而言，我已经将点击事件委托给document内的myCustomFuntion。

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

Obs ：问题也可以改写：在长时间运行后，这段代码是否会导致很多页面加载？

Obs 2：我无法从myCustomFunction内部进行点击事件处理，因为它取决于之前完成的计算。

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

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

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

1 个答案: