问题描述
试图在单击远程 true 链接时显示微调器，尝试了两种方式 使用 turbolinks:events 和 ajaxStart/ajaxStop 事件。 turboinks:load 事件成功触发，但 :click 没有。 ajaxStart 和 ajaxStop 都不起作用。
使用 rails 6、turbolinks 5、webpacker。 链接以非常正常的方式生成 例子：
<%=link_to 'Documents',documents_path,remote: true %>
此代码位于 application.html.erb 的 <head> </head> 中
<script type="text/javascript">
$(document).on("turbolinks:load",function(){
alert('turbolinks load works');
//$(".sk-cube-grid").hide();
});
$(document).on("turbolinks:click",function(){
alert('this doesnt work');
//$(".sk-cube-grid").show();
});
</script>
使用ajaxStart/ajaxStop的代码也放在application.html.erb中
$(document).ajaxStart(function(){
alert('started ajax - doesnt work');
});
$(document).ajaxStop(function(){
alert('stopped ajax - doesnt work');
})
编辑
将事件处理更改为以下内容：
var page_loaded = function() {
$(".sk-cube-grid").hide();
};
$(document).on("read page:load",page_loaded);
$(document).on("ajax:send","a",function(xhr){
$('.sk-cube-grid ').show()
}).on("ajax:complete",function(data,status,xhr) {
$(".sk-cube-grid").hide();
});
这段代码在 ajax:starts 时显示() .sk-cube-grid，但在 :complete 和 :success 时不隐藏。
解决方法
设置 remote: true 选项会告诉 Rails 使用 UJS (unobtrusive javascript) 来处理 ajax。这不是由 Turbolinks 处理的，因此您正在收听的 Turbolinks 事件不会被触发。
您有两种选择：按原样使用 UJS but listen to the correct event: ajax:success 或删除 remote: true 并让 Turbolinks 处理它（并像您现在一样聆听 turbolinks:load）