ajax - RAILS 6 Ajax 事件和 Ajax Spinner

Question

我试图在每个 Ajax 请求上显示加载动画/微调器
我的 application.js

$(document).on("turbolinks:load", function() {
  window.addAjaxLoaderHandler();
});

window.addAjaxLoaderHandler = function() {
  $(document).on('ajax:send', function() {
    $('#ajax-loader').show();
  });

  $(document).on('ajax:complete', function(){
    setTimeout(() => {$('#ajax-loader').hide();}, 100);
  });
}

这非常有效，直到我通过 AJAX 加载远程表单。如果我提交新加载的表格 ajax:send触发，但在完成后(没有任何错误) ajax:complete不会(微调器不会被隐藏)。
问题似乎是我使用 ajax 调用删除了加载的表单。
我能做些什么来完成这项工作？
我只是想点击一个链接，加载一个表单并在发送信息后删除表单。
更新
我的 application.html.haml (我使用 HAML，所以语法是相应的，所以 #... 表示 <div id="...">#all indented code lines#</div> )

#main
  = yield

#ajax-loader

表单将像这样加载:

$('#main').append('<%= j(render(:partial => 'new', :locals => {:model => @model})) %>');

问题是 #ajax-loader不隐藏，提交表单后仍然显示。
我认为问题在于，我删除了 AJAX 调用触发元素。但我希望，因为我将监听器绑定(bind)到 document ，它仍然会触发。
当然在这种情况下我可以做 $('#ajax-loader').hide(); ，但我试图理解为什么 ajax:complete没有被解雇。

Answer 1

我猜你回答了你自己的问题:问题是当你删除表单时，事件监听器也是如此。
您可以使用检查哪些事件监听器仍适用于您的文档对象getEventListeners(document) .在微调器被触发并拒绝隐藏后，在您的控制台上尝试此操作*。
*编辑:这是一个谷歌浏览器功能，可能在其他浏览器中不起作用，尽管它们中的大多数都有方法来检查节点上的监听器
我想到了这些解决方法:
a) 每次删除表单时重新绑定(bind)监听器；
b) 将监听器附加到 window对象而不是 documentc) 如果您使用 jQuery Ajax，您可以使用 beforeSend和 complete属性来显示和隐藏微调器而不是事件。如果不是 jQuery Ajax，则可能有类似的方法来实现相同的行为。