JavaScript 在 Rails 应用程序上加载了 3 次

Question

我有一个 ajax 函数，当它应该只触发一次时，它会在单击时被多次调用。

$(document).on('click', '.newGameItem', function() {
    console.log('start click event');
    var apiUrl = $(this).attr('data-api-string');
    var callType = $(this).attr('data-api-post-call');
    var apiKey = $(this).attr('data-api-key');
    var dataType = $(this).attr('data-api-data-type');
    var returnValue = $(this).attr('data-return-value');
    var currentGameWrapper = $(this).parent().parent().parent();

    console.log('before api call');
    getNewItem(apiUrl, callType, apiKey, dataType, returnValue, currentGameWrapper);
    console.log('after api call');
});

此点击事件位于 Turbolinks 加载事件内:

$(document).on('turbolinks:load', function() {  ...  }

我在turbolinks加载事件的顶部放入了console.log，可以确认该文件中的JavaScript运行了3次。我注意到当我在此页面上单击指向另一个页面的链接，然后单击此页面的后退按钮时会发生这种情况，但当我从应用程序中的其他位置单击该页面时也会发生这种情况。

该文件正在通过 Assets 管道进行编译，并且我们在 body 标记上有 data-no-turbolink (实际上它似乎从未执行任何操作。

有什么想法为什么会发生这种情况或解决方法吗？目前我无法选择将 Turbolinks 从我的应用程序中完全剔除。

谢谢

Answer 1

该点击事件必须位于 'turbolinks:load' 事件之外，这就是将其附加到 $(document) 而不是元素的要点。如果你有它，它就会在每次页面加载时创建它。您的 JavaScript 应该如下所示:

$(document).on('click', '.newGameItem', function() {
  // ...
});

$(document).on('turbolinks:load', function() {
  // ...
});