ajaxStart/turbolinks:click 在使用远程点击链接时不会触发：true

Posted

技术标签:

【中文标题】ajaxStart/turbolinks:click 在使用远程点击链接时不会触发：true【英文标题】：ajaxStart/turbolinks:click are not fired when clicking on link using remote: true 【发布时间】：2021-08-13 02:34:45 【问题描述】：

尝试在单击带有远程 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的&lt;head&gt; &lt;/head&gt;

    <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", "a", function(data, status, xhr) 
  $(".sk-cube-grid").hide();
);

此代码在 ajax:starts 时显示（）.sk-cube-grid，但在 :complete 或 :success 时不隐藏。

【问题讨论】：

【参考方案1】：

设置remote: true 选项告诉Rails 使用 UJS (unobtrusive javascript) 来处理ajax。这不是由 Turbolinks 处理的，因此您正在收听的 Turbolinks 事件不会被触发。 你有两个选择：像你一样使用 UJS but listen to the correct event: ajax:success 或删除 remote: true 并让 Turbolinks 处理它（并像现在一样听 turbolinks:load）

【讨论】：

坚持远程：真，注意到并非所有带有远程：真的link_to都会触发ajax：成功，只有“新”操作的方法。 也许您的某些操作失败了？他们都应该触发 ajax:success。无论如何，这能回答你的问题吗？ 不，不幸的是，当单击远程：true 链接时，ajax:success 和 ajax:complete 不会被触发。我试图删除远程：是的，即使启用了 turbolinks，单击也会完全加载页面，而不是渲染处理模式的 .js.erb 文件（在我的情况下）。 我使用稍微不同的代码编辑了这个问题。如果您看一下，我们将不胜感激。

以上是关于ajaxStart/turbolinks:click 在使用远程点击链接时不会触发：true的主要内容，如果未能解决你的问题，请参考以下文章