小编Fal*_*ero的帖子

我试图在每个 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 调用触发元素。但我希望，既然我将侦听器绑定到document，它仍然会触发。

当然在这种情况下我只能做$('#ajax-loader').hide();，但我试图理解为什么ajax:complete没有被解雇。