替换 DOM 元素上的 Rails Ajax 事件

Posted 2023-05-09

【中文标题】替换 DOM 元素上的 Rails Ajax 事件

【英文标题】：Rails Ajax event on replaced DOM element

【发布时间】：2021-04-06 06:03:04

【问题描述】：

我有一个简单的 Rails ujs 应用程序，页面上有一些远程链接。

<%= link_to 'Test', posts_path, remote: true, id: 'test' %>

在我的 js 模板中，我用新的链接替换了这个链接。

$('#test').html('<%= j link_to "Test", posts_path, remote: true, id: "test" %>')

同时需要监听ajax:success事件：

window.addEventListener("load", () => 
  document.body.addEventListener("ajax:success", (event) => 
    # => Expected to be fired on all success ajax calls, no matter partial dom manipulations
  );
);

但问题是这个事件永远不会触发。因为它的目标元素被替换了。

即使它的目标元素从 dom 中删除，我如何才能收听 ajax:success？

我的代码没有实际意义，但它的目的是用简单的方式演示现实世界的问题。

【问题讨论】：

嗯，我不明白用例，但也许你可以简单地在你的js模板developer.mozilla.org/en-US/docs/Web/Guide/Events/…中手动触发ajax:success事件。不知道这是否有帮助。

如果新链接将指向类似posts_path之类的静态内容，为什么不在成功事件中重新创建js文件上的链接，您可以将其写入函数并在成功事件后调用它以再次将侦听器添加到新内容中，避免代码重复。我最近也遇到过类似的情况，但是由于需要一些动态数据，最终返回了一个json数组，用于控制器中带有data(format.json)的链接，并在js端操作返回的数组来实现新的内容没有轨道

你在这个项目中使用 TurboLinks 吗？如果是这样，则需要为 TurboLinks 重写您的窗口 onLoad 侦听器。

@Scott Swezey 没有 turbolinks。主要问题是从 DOM 中删除目标元素后，ajax:success 事件没有冒泡。

您可以触发自定义事件以在您的 js 模板中侦听，而不是侦听 ajax:success 事件吗？ $('#test').html('<%= j link_to "Test", posts_path, remote: true, id: "test" %>').trigger('custom_event')

【参考方案1】：

当我有远程链接时，比如帖子显示操作，我会创建一个show.html.erb 用于正常交互，然后还创建一个show.js.erb，在那里我将定位我想要更改/修改的元素从远程链接并使用转义javascript方法替换那里的html。 它看起来像$('some element').html('<%= j render 'some_partial.html.erb'%>')。其中some_partial.html.erb 是被替换元素的一部分。

Escape Javascript